Create CSS gradients with live preview — linear, radial, dark, and black gradients. Copy the CSS code instantly. Free, no signup needed.
Create beautiful CSS gradients
background: linear-gradient(135deg, #667eea, #764ba2);A CSS gradient is a smooth transition between two or more colors applied directly as a CSS background — no image file required. The browser generates the gradient at render time, which means it scales perfectly to any screen size, loads instantly (zero HTTP request), and can be changed entirely in code.
CSS introduced the linear-gradient() and radial-gradient() functions as part of the CSS Images specification. They are now supported in every modern browser including Chrome, Firefox, Safari, and Edge with no prefix required. A third type, conic-gradient(), is supported in all modern browsers and is useful for pie charts and angle-based designs.
Gradients replaced image-based backgrounds in most modern web design workflows. Where a designer once exported a 50KB JPG just to achieve a subtle background fade, a CSS gradient achieves the same result in under 100 bytes of code — and it adapts to dark mode, retina screens, and any container size automatically.
| Gradient type | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| linear-gradient() | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
| radial-gradient() | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
| conic-gradient() | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
| background-clip: text | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
Pick linear, radial, or conic gradient. Linear gradients flow in a straight line, radial gradients radiate from a center point, and conic gradients sweep around a point.
Add color stops and adjust their positions. You can create dark gradient CSS, black gradients, vibrant multi-color gradients, or anything in between using the color picker.
The CSS gradient code is generated in real time. Copy it and paste it directly into your stylesheet as a background property — it works on any HTML element.
background: linear-gradient(to right, #ff0000, #0000ff);background: radial-gradient(circle, #ff0000, #0000ff);background: linear-gradient(135deg, #1a1a2e, #16213e);Copy any of these ready-to-use CSS gradients directly into your stylesheet.
linear-gradient(135deg, #f093fb, #f5576c)linear-gradient(135deg, #667eea, #764ba2)linear-gradient(135deg, #0c0c1e, #1a1a4e)linear-gradient(to right, #7928ca, #ff0080)linear-gradient(135deg, #134e5e, #71b280)linear-gradient(135deg, #232526, #414345)linear-gradient(135deg, #f7971e, #ffd200)linear-gradient(135deg, #000000, #0f2027, #203a43)A CSS text gradient applies a gradient fill to text rather than a background. This is done using background-clip: text combined with -webkit-text-fill-color: transparent. It works in all modern browsers.
Use the generator above to create your gradient, copy the CSS value, and replace the background value in this snippet. Text gradients work best on large headings where the color transition is clearly visible.