Gradient generator

Create CSS gradients with live preview. Add color stops, switch linear, radial or conic, then copy or export.

Click to add · Drag to move

Code
background: linear-gradient(90deg, #E65817 0%, #F9D4C2 100%);

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.

How to use the generator

Choose the gradient type (linear, radial or conic) and adjust the angle when it applies. Click the preview bar to add a new color stop, or drag existing ones to move them. When you like the result, copy the CSS or the Tailwind equivalent, ready to paste into your project.

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.

Radial

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

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.

FAQ

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.