This free Gradient CSS generator lets you build linear, radial, and repeating gradients in your browser and see the result update live as you edit. Pick your orientation, set the angle for linear gradients or the size and position for radial ones, then choose your colors and fine-tune each color stop by percentage. Use the "Add stop color" button to layer in as many intermediate colors as you need, then copy the generated CSS straight into your stylesheet. Gradients are drawn as background images via the linear-gradient() and radial-gradient() functions, so no images or extra requests are required. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What is the difference between linear-gradient and radial-gradient?

linear-gradient() blends colors along a straight line at a given angle or direction, while radial-gradient() blends them outward from a center point in a circular or elliptical shape. Both are values for background or background-image, not standalone properties.

How do I set the direction or angle of a linear gradient?

Add an angle such as 90deg or a keyword like 'to right' as the first argument, for example linear-gradient(90deg, #ff0000, #00ff00). 0deg points up and angles increase clockwise, so 90deg goes left to right.

How do color stops work in a CSS gradient?

Each color can be followed by a position, like #ff0000 0% or #00ff00 80%, which tells the browser where that color sits along the gradient. Adjusting these percentages controls how sharp or gradual the transition between colors is.

Are CSS gradients supported in all browsers?

Yes, unprefixed linear-gradient() and radial-gradient() are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Only very old browsers such as IE 9 and earlier lack support, so vendor prefixes are rarely needed today.

  • Stopper Color x