Skip to main content
Book Consultation →
Create colors100% FreeInstant

CSS Gradient Generator: Linear, Radial and Conic

This free CSS gradient generator writes the CSS code for a linear, radial or conic gradient from your list of colors. Set the angle, then copy the background rule straight into your stylesheet.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

A CSS gradient is an image made from color math, so it loads instantly and scales to any size. Gradients are used for hero backgrounds, buttons, cards and charts. Writing the syntax by hand for several stops is fiddly.

Add your colors, pick a type and an angle and copy the finished CSS.

How to Use This Tool

  1. Type your colors, one per line, in HEX, RGB, HSL or by name.
  2. Choose linear, radial or conic.
  3. Set the angle if needed.
  4. Press Generate and copy the CSS.

How the Calculation Works

Colors are normalized to HEX and spaced evenly. A linear gradient becomes linear-gradient(angle, color 0%, color 50%, color 100%). A radial one becomes radial-gradient(circle, …) and a conic one conic-gradient(from angle, …). The first color is also output as a solid fallback background.

Worked Example

Three colors #1d4ed8, #7c3aed and #ec4899 at 135 degrees give: background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #ec4899 100%);

Common Uses

  • Hero and section backgrounds.
  • Buttons and cards.
  • Progress bars and charts.
  • Social media graphics.

Tips and Common Mistakes

  • Keep text contrast good against every part of the gradient.
  • Two close hues look smoother than far-apart ones.
  • Use the mixer to find a middle color for a three-stop gradient.

Next, you may need the color mixer, color palette generator, color contrast checker, color converter.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

A smooth change from one color to another along a straight line. The angle sets the direction: 0deg goes bottom to top and 90deg goes left to right.
A radial gradient spreads outward from a center point. A conic gradient sweeps around a center point like a pie chart or color wheel.
Paste the background line into any CSS rule. The tool also gives the version with a plain color fallback for very old browsers.
As many as you like. The tool spreads them evenly from 0 to 100 percent.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.