CSS Gradient Generator Online
Build beautiful CSS linear and radial gradients visually. Add color stops, adjust positions, choose a direction, and copy the ready-to-use CSS code in one click. No signup, runs entirely in your browser.
⏱ 9 min read · Complete guide below
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);How the CSS Gradient Generator Works
- 1Choose Linear or Radial gradient type — the live preview updates instantly.
- 2For linear gradients, pick a direction — right, bottom, diagonal, or any preset angle.
- 3Click each color swatch to change a color stop. Drag the position slider to move it along the gradient.
- 4Click Copy CSS to copy the complete
background:declaration, ready to paste into any stylesheet.
CSS Gradient Syntax Reference
The linear-gradient() function takes a direction or angle followed by two or more color stops. Each stop specifies a color and an optional position percentage. The radial-gradient() function accepts a shape (circle or ellipse), size keywords, and the same color stop syntax.
How CSS Gradients Actually Work
A CSS gradient is not an image file — it is generated by the browser on the fly from a compact set of instructions, and understanding those instructions makes the tool far more powerful. Every gradient is defined by a type (linear or radial), a direction (an angle like 90deg or a keyword like to right), and a series of color stops. Each stop is a colour plus an optional position, and the browser smoothly blends between adjacent stops. The percentages are the key to control: a colour at 0% starts at the beginning of the gradient line, 100% is the end, and everything in between interpolates. Once you can read the generated code this way, you can tweak an angle or nudge a stop by hand with confidence.
Linear, Radial, and Beyond
The two everyday gradient types cover most needs. A linear gradient blends colours along a straight line and is the workhorse for page backgrounds, hero banners, and buttons. A radial gradient blends outward from a central point in a circle or ellipse, which is perfect for spotlight effects, glows, and giving flat shapes a sense of depth. CSS also offers two advanced relatives worth knowing: conic gradients, which sweep colours around a centre point like a colour wheel or pie chart, and the repeating variants of each type, which tile a stop pattern to create stripes and other repeating textures. All of them share the same colour-stop syntax, so the skills transfer directly.
Why Gradients Beat Image Files
Using a CSS gradient instead of a background image has real, practical advantages. Because the browser paints it from a text instruction rather than downloading a picture, a gradient adds no HTTP request and no file weight to your page, which helps load times. It is also infinitely scalable — a gradient looks crisp at any size and on any screen density, with no blurring or pixelation, whereas an image has a fixed resolution. And it is trivially editable: changing a colour or angle is a one-line code change rather than re-exporting an asset. The one thing to watch is contrast — if text sits on top of a gradient, check that it stays readable against both the lightest and darkest parts of the blend.
Tips for CSS Gradients
Diagonal Gradients
Use 135deg or 45deg for a diagonal effect. to bottom right is equivalent to approximately 135deg and adjusts automatically to the element's aspect ratio.
Hard Color Stops
Place two stops at the same position to create a sharp color change with no blend. Example: #red 50%, #blue 50% creates a half-and-half split.
Repeating Gradients
Use repeating-linear-gradient() or repeating-radial-gradient() to tile the pattern. Define the stops for one tile and the browser repeats them automatically.
Layering Gradients
You can stack multiple gradients as a comma-separated list in the background property. The first gradient in the list renders on top.
Performance
CSS gradients are painted by the GPU and cost nothing in HTTP requests. They are more performant than gradient image files and infinitely scalable.
Accessibility
If you use a gradient behind text, ensure sufficient contrast ratio between the text color and the darkest (or lightest) part of the gradient using a contrast checker.
Gradients Through the History of Web Design
Gradients have had a fascinating journey through web design trends. In the early 2000s they were everywhere, used heavily in the skeuomorphic style to make buttons and panels look glossy and three-dimensional, mimicking real-world materials. Then the flat design movement of the early 2010s swept them away almost entirely in favour of solid colours and clean simplicity — gradients briefly looked dated.
But they returned, transformed. Around 2015, bold, vibrant gradients came back into fashion — the Instagram logo's shift to a colourful gradient was a landmark moment — and today they are a staple of modern interfaces, used for striking hero backgrounds, subtle depth, and the frosted “glassmorphism” look. The difference from the skeuomorphic era is intent: modern gradients are used deliberately as a design element in their own right, not just to fake a physical surface. Knowing this history helps you use them tastefully rather than reaching for the heavy, dated styles of the past.
Design Techniques for Beautiful Gradients
The difference between an elegant gradient and a muddy one usually comes down to colour choice. The safest, most harmonious results come from blending analogous colours— hues that sit near each other on the colour wheel, like blue to purple or orange to pink — because they transition smoothly without passing through an ugly intermediate. The classic mistake is blending two colours that are far apart on the wheel, such as red to green, which forces the gradient through a murky grey-brown “dead zone” in the middle. When you do want distant colours, adding an intermediate stop can route the blend through a pleasing path.
Beyond colour, restraint is your friend. Subtle gradients — two close shades of the same hue — add a sophisticated hint of depth that reads as premium, while boldmulti-colour gradients make an energetic statement for a hero section or call to action. Match the intensity to the job. Angle matters too: a slight diagonal (like 135deg) usually feels more dynamic and natural than a flat top-to-bottom or left-to-right blend. And for a soft, organic feel, layering multiple radial gradients at different positions approximates the fashionable “mesh gradient” look.
Advanced Gradient Techniques
Gradients can do far more than fill a background. One popular trick is the gradient texteffect: apply a gradient as the background of an element and then use background-clip: textwith transparent text colour, so the gradient shows through the letter shapes — a striking way to style a headline. You can also create gradient borders using techniques like a gradient background with border-image, or by layering a gradient behind a slightly smaller solid element.
Another everyday use is the image overlay: layering a semi-transparent gradient (fading from a colour to transparent) on top of a photo, which both adds mood and, importantly, ensures text placed over the image stays readable by darkening the area behind it. This is exactly why the accessibility point matters — whenever text sits on a gradient, check that it maintains sufficient contrast against both the lightest and darkest parts of the blend. Because gradients cost nothing in file weight, scale perfectly to any screen, and change with a single line of CSS, they are one of the most versatile and performant tools in a designer's kit. Experiment with the stops and angles in the generator above, copy the CSS, and these advanced effects are only a small step further.
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line in a specified direction (e.g. left-to-right, top-to-bottom, or any angle). A radial gradient radiates from a central point outward in a circular or elliptical pattern. Linear gradients are more common for backgrounds and banners; radial gradients work well for spotlight effects and circular elements.
Can I use more than two colors in a CSS gradient?
Yes — CSS gradients support any number of color stops. Click 'Add Stop' to insert additional colors at any position between 0% and 100%. Multiple stops let you create multi-color gradients like rainbows or branded color transitions.
How do I use the copied CSS in my code?
Paste the output directly into a CSS rule's background property. Example: .hero { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }. The value works in all modern browsers without prefixes. For very old browser support (IE 10+), you can add a -webkit- prefixed version.
What do the color stop percentages mean?
Each percentage is the position along the gradient where that color is at full strength. A stop at 0% starts at the very beginning (left for 90deg), 50% is exactly the middle, and 100% is the end. Stops between two percentages blend smoothly between the two colors.
Can I create a transparent gradient?
Yes — use a color with an alpha value. In a color picker, choose a partially transparent color. You can also manually edit the CSS output to use rgba() values, e.g. linear-gradient(90deg, rgba(102, 126, 234, 0) 0%, rgba(102, 126, 234, 1) 100%) for a fade-in effect.
Is this tool free and private?
Yes. The gradient builder runs entirely in your browser. No color values, gradient data, or any other information is sent to a server. All processing is done locally in JavaScript.
Why use a CSS gradient instead of a background image?
A CSS gradient is generated by the browser from a short text instruction, so it adds no HTTP request and no file weight to your page, which improves load time. It is also infinitely scalable — sharp at any size and screen density with no pixelation — and trivially editable, since changing a colour or angle is a one-line code change rather than re-exporting an image. For solid-colour blends, gradients are almost always the better choice than a picture file.
What is the difference between an angle and a keyword direction?
They set the direction of a linear gradient in two equivalent ways. An angle like 90deg specifies an exact rotation (0deg points up, 90deg points right, 180deg points down). Keywords like "to right" or "to bottom right" point toward an edge or corner and adapt automatically to the element's dimensions — "to bottom right" always reaches the corner regardless of the box's aspect ratio, whereas a fixed angle does not. Use keywords for corner-to-corner blends and angles for precise control.
How do I create a hard edge instead of a smooth blend?
Place two colour stops at the same position. For example, a stop of red at 50% followed immediately by blue at 50% produces a crisp half-and-half split with no gradual transition between them. This technique lets you build stripes, colour blocks, and sharp boundaries using the gradient syntax, and repeating gradients extend it into tiled stripe patterns.
Do CSS gradients work in all browsers?
Yes. Linear and radial gradients are supported in every modern browser without vendor prefixes, so the code this tool generates works out of the box. Only very old browsers (such as Internet Explorer versions before 10) need a prefixed -webkit- fallback, which is rarely a concern today. Newer conic gradients have slightly less universal support but are fine in all current browsers.