CSS Gradient Generator

Design linear, radial and conic CSS gradients visually and copy the ready-to-use CSS code. Free, instant and private — everything runs in your browser.

How to use the CSS Gradient Generator

  1. Pick a gradient type. Choose linear for a straight color fade, radial for a circular glow, or conic for a color sweep around a center point. Set the angle or position to control the direction.
  2. Adjust the color stops. Click a swatch to open the color picker or paste a HEX code, and set each stop's position from 0% to 100%. Add up to ten stops, reverse them, or roll a random gradient for inspiration.
  3. Copy the CSS. The preview and the background code update instantly. Press Copy CSS and paste it straight into your stylesheet.

About this tool

This free CSS gradient generator builds standards-compliant linear-gradient(), radial-gradient() and conic-gradient() code that works in every modern browser without vendor prefixes. Gradients are perfect for website hero sections, buttons, cards and app backgrounds — they add depth and color while costing zero bytes of image download. The generated code also includes a solid-color fallback line for very old browsers.

Everything happens locally in your browser: no uploads, no account and no watermarks. Designers use it to prototype background ideas quickly, and developers use it to grab exact color-stop syntax instead of writing gradient code by hand. Combine it with our Color Picker or Color Palette Generator to find the perfect colors first.

Frequently asked questions

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

A linear gradient blends colors along a straight line at the angle you choose (90° runs left to right, 180° runs top to bottom). A radial gradient radiates outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like a pie chart or color wheel.

What does the color stop position (%) mean?

The percentage tells the browser where along the gradient line a color is at full strength. A stop at 0% starts the gradient, one at 100% ends it, and the browser smoothly interpolates the colors in between. Placing two different colors at the same position creates a hard edge instead of a fade.

Do I still need -webkit- or -moz- vendor prefixes?

No. Unprefixed linear-gradient() and radial-gradient() have worked in all major browsers since around 2013, and conic-gradient() has been supported everywhere since 2020. The generated code includes a plain background-color fallback just in case.

Can I use the gradient as text color or on an image?

Yes. Apply the generated background to any element. For gradient text, add -webkit-background-clip: text and color: transparent to the same rule. You can also layer gradients over images by listing both in the background property, separated by a comma.