CSS Gradient Generator
Build a gradient, then set it in motion. Unlimited color stops with OKLCH interpolation for smooth perceptual transitions. The preview updates live at every step — copy the CSS when it looks right.
CSS Gradient Generator
How to create a CSS gradient
A CSS gradient is a smooth transition between two or more colors defined entirely in code — no image files required. In this tool, start by choosing your gradient type: linear (a straight-line sweep), radial (expanding from a centre point) or conic (rotating around a point like a color wheel). Add your color stops using the color picker, drag them to reposition, and choose a direction using the compass controls. The live preview updates instantly at every step. When the gradient looks right, hit Copy to get the CSS output — a single background declaration ready to paste into any stylesheet or design system token.
Linear, radial and conic gradients explained
Linear gradients flow in a straight line at any angle, making them ideal for backgrounds, banners and UI surfaces. The CSS linear-gradient() function accepts an angle and a list of color stops. Radial gradients expand outward from a focal point in an ellipse or circle — useful for spotlight effects, depth cues and vignettes. Conic gradients sweep around a centre point like a pie chart, and are especially effective for abstract backgrounds and color wheels. All three types can be layered using multiple background-image declarations separated by commas, which allows complex gradient compositing without Photoshop.
Why OKLCH produces better gradients than RGB
Standard CSS gradients interpolate between colors in the sRGB color space, which can create a muddy, desaturated midpoint when the two stops are complementary colors. OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space that keeps perceived lightness and saturation consistent across the gradient. The result is that two vivid colors produce a vivid midpoint, not a grey one. This tool generates the intermediate stops in JavaScript and outputs them as standard sRGB hex values — so you get the quality of OKLCH interpolation in CSS that works in every browser, including those that don't yet support color() or oklch() natively.
Animating CSS gradients
CSS gradients cannot be animated directly via transition — the browser treats them as images rather than interpolatable values. This tool offers four animation modes that work around this limitation. Shift and Flow animate background-position on an oversized gradient, creating seamless looping motion. Breathe pulses opacity or scale for a slow, calm pulse effect. Rotate uses the CSS @property rule to natively animate the gradient angle, available in Chrome 85+, Safari 15.4+ and Firefox 128+. All generated CSS is self-contained and production-ready — no JavaScript needed at runtime.
CSS gradient browser support
Linear and radial gradients are supported in all modern browsers since 2012 and require no prefixes. Conic gradients are supported from Chrome 69, Firefox 83 and Safari 12.1. The @property rule used for the Rotate animation mode requires Chrome 85+, Safari 15.4+ or Firefox 128+. The OKLCH-interpolated output from this tool is standard hex — no CSS Color Level 4 support needed. The color-mix() and native oklch() interpolation in CSS is a newer feature; this tool provides a JavaScript-computed equivalent for universal compatibility.
Frequently asked questions
Can I use the generated CSS gradient in production?
-webkit- and -moz- have not been needed in any browser released since 2015.What is the difference between linear-gradient and background-image?
linear-gradient() is a CSS function that produces a gradient image. You use it as the value of the background-image or shorthand background property. The tool outputs it as background: linear-gradient(...); for conciseness.How do I make a transparent gradient in CSS?
rgba() or hwb() values at the relevant stop. Note: avoid animating from a fully opaque color to transparent in sRGB — it transitions through black. Use rgba(r, g, b, 0) of the same hue instead.Why does my gradient look muddy in the middle?
Can I export the gradient as an image?
<div> in your browser and use a screenshot tool, or paste the CSS into Figma's fill panel which supports linear-gradient syntax.How many color stops can a CSS gradient have?
Related tools
