Skip to content

CSS gradient generator

Create linear, radial or conic gradients with a live preview, fine-tune colors and stops, and copy CSS or Tailwind code ready to paste.

Gradient type

Angle

90°

Color stops (2)

  • #2C71DE
  • #051938

Click to add · Drag to move

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

Ready-made CSS gradients

Click one to load it into the editor and make it your own.

What a CSS gradient is and how it works

A gradient is a smooth transition between two or more colors, used as a background with CSS background. Instead of a flat fill, the browser paints a progressive mix between the colors you set, in the direction or shape you choose.

Each color in the gradient is a color stop: the color code and the point, as a percentage, where that color is fully pure. Between two stops, the browser calculates the transition automatically. Two stops give a simple blend; more stops add extra nuance.

Linear

Colors transition in a straight line at the angle you set. It is the most common type, ideal for backgrounds with a clear direction, top to bottom or on a diagonal.

linear-gradient(90deg, #F97316, #FBBF24)

Radial

Colors expand in a circle from a center point outward. It works well for spotlight, glow or depth effects.

radial-gradient(circle, #FDE68A, #F97316 70%)

Conic

Colors rotate around a center point, like a clock. It is the least common type, useful for color wheels, progress indicators or more experimental effects.

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

How to write a gradient in CSS

A linear gradient is declared with the linear-gradient() function inside the background property. These are its parts:

135deg
The direction. 0deg points up, 90deg to the right and 180deg down. You can also write to right or to bottom right.
#FF5F6D
Each color of the gradient, in any CSS format: HEX, rgb(), hsl() or oklch().
0%
The stop position: where that color is pure. If you omit it, the browser spreads the colors evenly.

Radial gradients use radial-gradient(circle, …) and conic ones conic-gradient(from 90deg, …), with the same color stops.

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

How to use the generator

  1. Pick the type

    Linear, radial or conic. For linear and conic gradients, set the angle with the slider or the direction buttons.

  2. Adjust colors and stops

    Select a stop to change its color, drag it along the bar to move it, or click the bar to add another. Up to eight stops.

  3. Copy the code

    Copy the CSS or its Tailwind class equivalent and paste it into your project. You can also export the individual colors.

Tips for gradients that look good

  • Neighboring colors on the wheel

    Colors that sit next to each other on the color wheel create smooth, natural transitions.

  • Avoid the gray zone

    Between two opposite colors the middle often turns muddy. Add a brighter intermediate stop to avoid it.

  • Few stops

    Two or three colors are enough for most backgrounds. More stops rarely add elegance.

  • Readable text on top

    Check text contrast against both the lightest and the darkest color of the gradient.

FAQ

Use the background property with linear-gradient(), radial-gradient() or conic-gradient(), giving the direction and the colors. For example: background: linear-gradient(90deg, #2193B0, #6DD5ED);

It is each color that makes up the gradient, plus the point (as a percentage) where that color shows pure. Between two stops, the browser calculates the transition automatically.

Linear transitions in a straight line at an angle. Radial expands in a circle from a center point. Conic rotates around a center point, like a clock.

As many as you need, by clicking the preview bar. Two stops give a simple transition; more stops let you build gradients with several hues.

Yes. Besides standard CSS, the generator offers the Tailwind syntax equivalent, ready to copy.

Yes. linear-gradient, radial-gradient and conic-gradient are standard CSS, supported in all modern browsers.

Apply the gradient to the body and give it at least the window height: body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

You cannot directly animate from one gradient to another, but you can move it: give it a background-size larger than the element (for example 200%) and animate background-position with a transition or @keyframes.

Related tools