What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser using CSS, without any image files. The three main types are linear-gradient (straight line), radial-gradient (circular or elliptical), and conic-gradient (angular sweep around a center point).

What is the difference between linear, radial, and conic gradients?

A linear gradient transitions colors along a straight line at a defined angle. A radial gradient radiates outward from a center point in a circle or ellipse. A conic gradient sweeps colors angularly around a center point, similar to a pie chart or color wheel effect.

What is a color stop in CSS?

A color stop specifies a color and the exact position (as a percentage from 0% to 100%) at which that color is fully rendered. Between stops, the browser smoothly interpolates the transition. Setting two consecutive stops at the same percentage creates a hard edge with no blending.

Are CSS gradients bad for performance?

No. CSS gradients are generated by the browser's GPU-accelerated rendering engine, making them far faster to load than equivalent raster images (PNG, JPG). They are resolution-independent, scale perfectly on retina displays, and add zero bytes to your network payload.

How do I use a gradient on text in CSS?

Apply the gradient to the element's background property, then add background-clip: text and -webkit-background-clip: text along with color: transparent and -webkit-text-fill-color: transparent. This reveals the gradient through the text shape.

How do I create a hard color stop in CSS?

Position two different color stops at the same percentage value — for example, red at 50% and blue at 50%. The browser creates an instantaneous switch with no blending between the two colors at that point.

How do I export the gradient to Tailwind CSS?

After building your gradient, click the 'Tailwind' tab in the code output section. The tool generates the correct bg-gradient-to-* with from-*, via-*, and to-* utility classes, or a JIT arbitrary value for complex gradients.

Is this CSS gradient generator free?

Yes. The CSS Gradient Generator is completely free with no account required. You can create unlimited gradients, use all presets, and export code in any format at no cost.

CSS Gradient Generator — Copy Linear, Radial & Conic Code Free

Build unlimited CSS gradients free — live preview, instant code export.

🔒 No Signup⚡ Live Preview🆓 Free Forever🎨 Unlimited Stops

Color Stops

Pos0%

Alpha

Direction

Angle135°

Export Code

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

2 color stops · linear

Works in all modern browsers · No watermark · No account · Free forever

The gray dead zone in two-color gradients

If you build a gradient between two saturated complementary colors — say, blue (#3B82F6) to orange (#F97316) — the midpoint interpolates through gray in sRGB color space. The gradient looks muddy or washed out in the middle. This is not a rendering bug; it's how sRGB linear interpolation works between colors that are opposite on the hue wheel.

The fix: add a mid-point color stop at 50% using a saturated color that sits between the two hues on the wheel. For blue-to-orange, that's roughly purple (#7C3AED) or magenta. Alternatively, use oklch color interpolation (supported in Chrome 111+ and Safari 16.2): background: linear-gradient(in oklch, #3B82F6, #F97316) — the OKLCH color space interpolates through perceptually uniform hues, avoiding the gray dead zone entirely.

When to use linear, radial, and conic

linear-gradientColor transitions along a straight line at any angle. Use for hero backgrounds, button hover states, and directional highlights. The angle to bottom right is equivalent to 135deg — both are valid.
radial-gradientColor radiates outward from a center point. Use for spotlight effects, circular element backgrounds, and vignette overlays on images. Control shape with circle or ellipse.
conic-gradientColor sweeps around a center point like a clock face. Use for pie charts, color wheels, and angular segment indicators. Often combined with border-radius: 50% to render a circle. Browser support is universal as of 2023.

CSS gradients vs. image backgrounds for performance

CSS gradients are rendered by the GPU on every paint. A simple two-stop linear gradient has essentially zero performance cost. A complex multi-stop radial gradient on a large element that repaints frequently (e.g., inside a scroll animation) can cause paint bottlenecks on low-end hardware. For static decorative backgrounds, CSS gradients are always faster than image files — no network request, no decode step, scalable at any resolution.

10 popular CSS gradient examples — copy and paste

Name	CSS	Preview
Sunset	linear-gradient(135deg, #f093fb 0%, #f5576c 100%)	#f093fb, #f5576c
Ocean	linear-gradient(135deg, #667eea 0%, #764ba2 100%)	#667eea, #764ba2
Forest	linear-gradient(135deg, #11998e 0%, #38ef7d 100%)	#11998e, #38ef7d
Fire	linear-gradient(135deg, #f7971e 0%, #ffd200 100%)	#f7971e, #ffd200
Midnight	linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)	#2c3e50, #4ca1af
Rose Gold	linear-gradient(135deg, #f6d365 0%, #fda085 100%)	#f6d365, #fda085
Radial center	radial-gradient(circle, #6a11cb 0%, #2575fc 100%)	#6a11cb, #2575fc
Mesh (conic)	conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #ff6b6b)	multi
Diagonal stripe	repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #dee2e6 10px, #dee2e6 20px)	stripes
Diagonal fade	linear-gradient(to bottom right, rgba(255,255,255,0) 40%, rgba(99,102,241,0.3) 100%)	rgba fade