Box Shadow Generator
Stack multiple shadows on a live card and copy the exact CSS.
Design & SEO
CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
What it does. A CSS gradient generator builds the gradient syntax visually instead of by trial and error. This tool supports linear, radial and conic gradients with unlimited color stops, adjustable angles and positions, and outputs copy-ready CSS. Everything renders live in your browser.
Runs in your browserNothing uploadsNo signupWorks offline
How to use CSS Gradient Generator
- Choose a gradient type: linear, radial or conic.
- Add and drag color stops, set the angle or center position, and adjust each stop’s color.
- Copy the generated CSS straight into your stylesheet.
What is the difference between linear, radial and conic gradients?
They differ in the geometry along which color interpolates.
Linear transitions along a straight line at an angle you set. 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. This is the workhorse — buttons, hero backgrounds, overlays.
Radial transitions outward from a center point in a circle or ellipse. Use it for spotlights, glows, vignettes and depth effects. The at keyword positions the center, which is how you get an off-center light source.
Conic transitions around a center point like a sweeping hand. This is what makes pie charts, color wheels and loading spinners possible in pure CSS with no images and no SVG.
| Type | Syntax | Best for |
|---|---|---|
| Linear | linear-gradient(90deg, #a, #b) | Buttons, banners, overlays |
| Radial | radial-gradient(circle at 30% 40%, #a, #b) | Glows, spotlights, vignettes |
| Conic | conic-gradient(from 0deg, #a, #b, #a) | Pie charts, color wheels, spinners |
| Repeating | repeating-linear-gradient(45deg, #a 0 10px, #b 10px 20px) | Stripes, hazard tape, patterns |
Why does my gradient look muddy in the middle?
Because CSS interpolates in sRGB by default, and sRGB is not perceptually uniform. Blending between two saturated hues passes through a desaturated grey zone — the classic case is blue to yellow, which travels through a dull grey-green rather than the vivid greens a designer expects.
There are two fixes. The traditional one is to add intermediate stops that steer the path manually, keeping saturation up through the middle.
The modern one is to change the interpolation space. CSS Color Level 4 allows linear-gradient(in oklch, blue, yellow), and OKLCH is perceptually uniform, so the midpoint looks like a midpoint. Browser support reached all major engines during 2023–2024. This tool outputs both versions so you can ship the OKLCH gradient with an sRGB fallback.
How do I make a gradient that works in dark mode?
Do not hard-code the colors. Define them as custom properties and redefine those properties under a dark-mode media query — the gradient then re-renders automatically.
The second consideration is contrast. A gradient behind text has a different contrast ratio at every point along it, and WCAG requires the minimum ratio across the whole area, not the average. Test the lightest point against your text color, not the middle.
The third is banding. Dark gradients band far more visibly than light ones, because the eye is more sensitive to differences in dark tones and 8-bit color has fewer distinguishable steps there. Adding a subtle noise overlay at 2–4% opacity hides banding better than any gradient adjustment.
What are the performance costs of CSS gradients?
A static gradient is essentially free. The browser rasterizes it once during paint and treats it like any other background, and it costs no network bytes at all — which is the main reason to use one instead of a background image.
The cost appears when a gradient animates. Animating background-position or a color stop forces a repaint on every frame, and repainting a full-viewport gradient is expensive enough to drop frames on mid-range hardware.
The compositor-friendly technique is to make the gradient element larger than the viewport and animate transform: translate() instead. Transforms run on the GPU without repainting, so the animation stays at 60fps. For very large gradients, will-change: transform promotes the element to its own layer.
Frequently asked questions
How do I make a diagonal gradient?
Use an angle of 45deg or 135deg, or the keyword form "to bottom right". Angles are measured clockwise from the bottom, so 0deg points up.
Can I use more than two colors?
Yes, as many stops as you want. Each stop can have its own position, so you can control exactly where each color sits along the line.
How do I make a hard-edged stripe rather than a blend?
Give two adjacent stops the same position — linear-gradient(#a 50%, #b 50%) produces a sharp split with no transition.
Do gradients work as text color?
Yes, using background-clip: text with a transparent text color. Support is universal now, though it requires the -webkit- prefix for older Safari.
Why is my conic gradient not circular?
Conic gradients follow the element box, so a non-square element produces an elliptical sweep. Set equal width and height, or add aspect-ratio: 1.
Can I animate a gradient?
Yes, but animate a transform on an oversized gradient element rather than the gradient itself. Animating background-position repaints every frame.
Is a gradient better than a background image?
Almost always. A gradient is a few dozen bytes of CSS, scales to any size, and never needs a second HTTP request.
Guides for CSS Gradient Generator
- HEX vs RGB vs HSL: Which to Use When7 min read
- CSS Gradients, Shadows and Palettes7 min read