How to use
Pick a gradient type (linear or radial), then drag color stops along the gradient bar to position them. Add or remove stops by clicking; change a stop's color via the picker; rotate a linear gradient by dragging the angle handle or typing a degree value. The CSS panel emits the `background:` declaration in the modern `linear-gradient(angle, color stop, ...)` syntax, ready to paste into a stylesheet, a Tailwind `bg-[...]` arbitrary value, or a CSS-in-JS template literal.
Reach for this when designing a hero section background, a button hover state, a placeholder image, or a card accent. Modern web design favors subtle 2-stop gradients over the more aggressive 4-stop or radial-with-conic patterns of the late 2010s, but the right gradient still adds the depth that a flat color cannot. The live preview matches what every modern browser will render (per CSS Images Module Level 3); the older `-webkit-` / `-moz-` prefixes are no longer needed since browser version requirements all moved past 2017.
Examples
Subtle 2-stop background
Input
type: linear
angle: 135deg
stops: #1e293b 0%, #0f172a 100%
Output
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
A modern "tech dark" hero background. 135° runs from top-left to bottom-right (the most flattering diagonal for most layouts). The two stops are close shades of slate, giving depth without competing with foreground content. Tailwind users can paste this into an arbitrary value: `bg-[linear-gradient(135deg,#1e293b_0%,#0f172a_100%)]` — note the underscores instead of spaces because Tailwind's value parser splits on whitespace.
4-stop sunset gradient
Input
type: linear
angle: 180deg
stops: #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%
Output
background: linear-gradient(180deg, #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%);
A vertical sunset effect — orange at top fading to cream at bottom. The non-evenly-spaced stops (0% / 40% / 70% / 100%) compress the bright orange near the top and stretch the cream into a wide flat area at the bottom, mimicking how an actual sky transitions. Multi-stop gradients work well for illustrative backgrounds and decorative banners, less well for content backgrounds because the busyness fights with text legibility.
Radial gradient — soft spotlight
Input
type: radial
shape: circle at center
stops: rgba(255,255,255,0.4) 0%, transparent 70%
Output
background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
A radial gradient with alpha-channel stops creates a "spotlight" effect that layers over any background. `radial-gradient(circle at center, ...)` puts the highlight in the middle; `at top right` shifts the focus. Combine with a base background via comma-separated layers: `background: radial-gradient(...) , linear-gradient(...)`. The first gradient sits on top, alpha lets the lower layer show through.
FAQ
How does the angle work — what is `0deg`?
`0deg` means "to top" — the gradient starts at the bottom and ends at the top. CSS gradient angles rotate clockwise from there: `90deg` is "to right" (left → right), `180deg` is "to bottom" (top → bottom), `270deg` is "to left". This differs from mathematical convention (where 0° is right and counterclockwise is positive) but matches what people expect when they think "up means north." You can also use `to top`, `to right`, `to bottom left` as keywords instead of degrees for the cardinal and intercardinal directions.
Do I still need `-webkit-` and `-moz-` prefixes?
No — unprefixed `linear-gradient` / `radial-gradient` has been supported in every major browser since 2017 (Chrome 26, Firefox 16, Safari 7, Edge from launch). If your `caniuse` baseline is Q3 2017 or later, drop the prefixes. The exception is the **conic-gradient** function (released 2019–2021 depending on browser); for legacy browser fallback, layer a solid color or a linear gradient as the unprefixed fallback before the conic, and the browser uses whatever it understands.
My gradient looks muddy in the middle — why?
CSS gradients interpolate in sRGB color space by default, which is gamma-encoded. Halfway between blue (`#0000FF`) and yellow (`#FFFF00`) in sRGB is muddy gray (`#808080`), not the vivid mid-tone perception suggests. The fix: use `linear-gradient(in oklab, blue, yellow)` (CSS Color Module Level 4, supported in Chrome 111+ / Firefox 113+ / Safari 16.4+) which interpolates in a perceptually uniform space, producing a vibrant green midpoint. For older browsers, add intermediate stops manually: `blue 0%, #00b487 50%, yellow 100%`.
Can I animate a gradient?
CSS `transition` and `@keyframes` cannot interpolate between two `linear-gradient` values directly — gradients are images, and the browser treats them as opaque. Workarounds: animate `background-position` on a much larger gradient image, animate the `background-size`, or use CSS custom properties combined with `@property` to declare the gradient stops as animatable color values. For complex animations, an SVG `<linearGradient>` with `<animate>` or a canvas/WebGL render gives full control. Static gradients on a hover state work as a `background-image` swap, but the swap is instant — there is no fade.
Performance — is a gradient slower than a solid color?
On modern hardware, no measurable difference for a static gradient. The GPU paints the gradient once into a layer and reuses the result. Animating gradient stops or sliding `background-position` does cost more per frame — keep these to small elements (buttons, badges) rather than full-page backgrounds, and use `will-change: background-position` to hint the compositor. The expensive case is when a gradient sits on an element that the browser repaints frequently (scroll-triggered or layout-thrashing animations); profile in DevTools if a busy gradient appears in a slow scroll path.
Conic gradients — when are they useful?
Conic gradients (`conic-gradient(red, yellow, green, blue, red)`) rotate colors around a center point — like a pie chart or a clock face. Practical uses: progress rings without SVG (`conic-gradient(blue 0% 60%, gray 60% 100%)` shows 60% progress), gradient borders that loop around a corner (combined with `mask`), and conic backgrounds that imitate a holographic foil. CSS support is Chrome 69+ / Firefox 83+ / Safari 12.1+ (universal since 2021). The tool you are reading focuses on linear and radial; for conic gradients write the syntax by hand or use a dedicated conic editor.
Related concepts
A CSS gradient is an *image* generated from a function — `linear-gradient(...)`, `radial-gradient(...)`, or `conic-gradient(...)` — not a solid color. They live in the same property slot as `background-image`, can be layered with commas, and respect the same blend modes and masking properties as raster images. The CSS Images Module Level 3 (W3C Recommendation, 2017) standardized linear and radial; Level 4 (Working Draft, since 2018) adds conic and the `in <color-space>` interpolation hint that pairs with CSS Color Module Level 4.
The **three gradient functions** cover almost all use cases. **Linear** runs along a straight line at any angle; the `to <side>` keywords and `<angle>deg` syntax point the line, and stops along the line define color transitions. **Radial** runs outward from a center point; `circle` / `ellipse`, `at <position>`, and the optional sizing keyword (`closest-side`, `farthest-corner`, etc.) shape the gradient. **Conic** rotates colors around a center point and is what you build pie charts, progress rings, and rotational effects from without SVG. Each function accepts the same color-stop syntax — `color percent`, with implicit even spacing if percentages are omitted.
Three adjacent ideas matter when designing with gradients. **Color interpolation** has historically been sRGB-only, producing the muddy-midpoint problem when crossing wide hue distances; CSS Color Level 4's `in oklab` or `in oklch` interpolation hint (Chrome 111+ / Firefox 113+ / Safari 16.4+) fixes it. **Performance** is GPU-accelerated for static gradients but expensive on layout-thrashing animations — animate `background-position` instead of stop colors directly. **Accessibility** is the underrated angle: a gradient behind text needs the same WCAG 4.5:1 contrast that solid backgrounds do, and the contrast should hold across the entire visible area, not just the most-likely overlap zone. Test with the contrast checker against both ends of the gradient.
