CSS Gradient Generator
Design linear, radial, or conic CSS gradients visually. Add up to 6 colour stops,
adjust angles and positions, then copy the ready-to-use CSS — including the
-webkit- prefixed variant. Runs entirely in your browser.
How to use this gradient generator
- Choose a type — Linear fades in a straight line; Radial radiates from a centre point; Conic sweeps around an angle like a pie chart.
- Set the angle or position — For linear gradients, drag the angle slider. For radial and conic, pick the origin position from the dropdown.
- Edit colour stops — Click the colour swatch to open your browser's colour picker, then drag the position slider to place the stop anywhere from 0% to 100%. Click + Add Stop to add more (up to 6), or click × to remove one.
- Use a preset — Click any named preset to instantly load a curated gradient. You can then adjust it further.
- Copy the CSS — Click Copy next to the output box, then paste it into your stylesheet.
CSS gradient syntax reference
| Function | Syntax | Notes |
|---|---|---|
linear-gradient() | linear-gradient(angle, color stop, …) | Angle: 0deg = up, 90deg = right, 180deg = down. Use keywords like to right, to bottom left. |
radial-gradient() | radial-gradient(shape size at pos, color stop, …) | Shape: circle or ellipse. Size keywords: closest-side, farthest-corner (default). |
conic-gradient() | conic-gradient(from angle at pos, color stop, …) | Stops are placed at angles, not lengths. Useful for pie charts and colour wheels. |
repeating-linear-gradient() | Same as linear | Repeats the stop pattern to fill the entire background — great for stripes. |
| Colour stop with hint | red 20%, 40%, blue 60% | The midpoint hint (bare percentage) shifts where the midpoint of the transition falls. |
| Transparent stop | rgba(255,0,0,0) or #ff000000 | Use rgba or 8-digit hex for stops that fade to nothing. |
Common uses for CSS gradients
- Hero backgrounds — A linear or radial gradient replaces a heavy image file and loads instantly.
- Button hover states — Animate a gradient overlay on hover for a polished feel (use opacity transition on a ::before pseudo-element).
- Text effects — Apply a gradient to text with
background-clip: textandcolor: transparent. - Overlay on images — Stack a semi-transparent linear gradient over an image to improve text legibility.
- Progress bars and pie charts — Conic gradients are perfect for showing completion percentages.
- Decorative dividers — A thin element with a gradient that fades to transparent on both ends makes an elegant section separator.
Frequently asked questions
Which browsers support CSS gradients?
All modern browsers — Chrome, Firefox, Safari, Edge, and Opera — support linear-gradient and radial-gradient without any vendor prefix since 2013. The -webkit- prefix is no longer needed for these two types in current browsers, though including it does no harm. conic-gradient has slightly newer support (Chrome 69+, Safari 12.1+, Firefox 83+) but still covers well over 95% of users as of 2024. You can safely use all three types in production without a polyfill.
Do CSS gradients affect page performance?
CSS gradients are rendered by the GPU and are extremely fast — much faster than loading a gradient image file. They add no HTTP requests, scale perfectly to any resolution (including Retina/HiDPI screens), and can be animated via CSS transitions or keyframes without triggering a layout recalculation (they only trigger compositing). Using gradients as backgrounds is one of the recommended performance best practices over decorative images.
How do I apply a gradient to text?
To apply a gradient to text you need three CSS properties: set background to your gradient, set -webkit-background-clip: text (also background-clip: text for non-WebKit browsers), and set color (or -webkit-text-fill-color) to transparent. For example: .gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }. Note that background-clip: text is not yet supported in all browsers without the -webkit- prefix, so include both.
Can I layer multiple gradients on the same element?
Yes. CSS allows you to stack multiple backgrounds, including gradients, on one element by separating them with commas. The first value is on top. For example: background: radial-gradient(circle at 20% 50%, rgba(255,107,107,0.4) 0%, transparent 50%), linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); — this overlays a soft red radial glow on top of a dark linear gradient. Each layer can be a different type and have its own size, position and stops.
How do I create a sharp colour transition (no fade) between stops?
To create a hard, abrupt edge between two colours instead of a smooth blend, place two colour stops at the same position (or one immediately after the other). For example: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%) produces a sharp split at 50% with no transition. You can use this trick to create stripes and checkerboard patterns. In this generator, drag two stops to the same position value to achieve this effect.
Can CSS gradients be animated?
CSS gradients themselves cannot be directly transitioned because background-image is not an animatable property. However there are two practical workarounds: (1) Animate the opacity of a pseudo-element (::before or ::after) that holds the new gradient on top of the element — this fades between two gradients smoothly. (2) Use CSS custom properties (variables) for the colour stops and animate those with @property (Houdini), which gives you first-class animated gradient support in Chrome and Edge.