CSS Gradient Generator

Add two or more color stops to instantly generate linear-gradient or radial-gradient CSS code with a live preview. Adjust the angle and stop positions freely, then copy the generated code with one click.

Tips

  • You can add up to 6 color stops and freely adjust each color and its position (%) to build complex, multi-color gradients.
  • For a linear gradient, 0deg points from bottom to top and 90deg points from left to right — drag the slider to adjust it intuitively.
  • Radial gradients have no angle setting; colors radiate outward from the center in a circular pattern instead.
  • Click "Copy CSS" to copy the generated code straight to your clipboard and paste it directly into your stylesheet.

Frequently Asked Questions

linear-gradient transitions colors in a straight line along a specified angle, commonly used for buttons and banner-style backgrounds. radial-gradient instead spreads colors outward from a center point in a circular or elliptical shape, which works well for spotlight effects or a sense of depth.

In CSS's linear-gradient(), the angle is specified in degrees (deg). 0deg points from bottom to top, 90deg from left to right, and 180deg from top to bottom. Note that CSS measures angles clockwise, which differs from the standard mathematical convention where 0 degrees points to the right.

Each color stop's percentage indicates where along the gradient — from the start (0%) to the end (100%) — that color is placed. Skewing the positions lets you create sections where the color changes gradually and others where it changes abruptly.

linear-gradient and radial-gradient are supported without vendor prefixes in all major browsers, including Chrome, Firefox, Safari, and Edge, going back as far as IE10. No extra workarounds are needed unless you must support very old mobile browsers.
ツールくん

Side Note — Why CSS Gradients Replaced Gradient Images

Before CSS3, gradient backgrounds on the web were typically created as PNG or JPEG images made in an image editor. That approach came with real downsides: slower page loads from extra image requests, blurry results when the image was stretched for responsive layouts, and having to re-export the whole image just to tweak a single color.

When browsers implemented the linear-gradient and radial-gradient syntax in the early 2010s, those problems largely disappeared. Because gradients are described entirely in text, they're lightweight, stay crisp at any size, and can be recolored just by editing a few values in a stylesheet.

Early implementations required different vendor prefixes (-webkit-, -moz-, -o-, and so on) and slightly different syntax across browsers, so developers had to write out multiple prefixed versions of the same rule. Now that the syntax has been standardized by the W3C, the unprefixed version works consistently across every major browser.

More tools in this category