Gradient Editor

Create beautiful CSS gradients with real-time preview

Gradient Settings

Gradient Type

Angle: 90°

Color Stops

#8b5cf6

#ec4899

100%

Edit Selected Stop

Position: 0%

Preview

CSS Code

background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);

Usage Examples

CSS:

.element { background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%); }

Tailwind (arbitrary value):

bg-[linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%)]

How It Works

CSS Gradient Mechanism

CSS gradients are a native browser background rendering feature. By defining color stops and direction parameters, the browser automatically performs color interpolation between stops during rendering. Gradients are not images but a CSS image generation method, so they don't add extra network requests.

Three Gradient Types

Linear Gradient (linear-gradient)

Transitions colors along a specified angle direction. 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. The most commonly used gradient type.

Radial Gradient (radial-gradient)

A circular or elliptical gradient that radiates outward from a center point. Great for creating spotlight, glow, and similar effects. This tool uses the circle shape.

Conic Gradient (conic-gradient)

Color transitions that rotate around a center point, similar to a color wheel. Can create pie charts, color wheels, and more. Supports the from keyword to specify the starting angle.

Color Stops

Each color stop consists of a color value and a position percentage (e.g., #8b5cf6 0%). The position indicates where that color appears on the gradient track. The browser automatically performs smooth color transitions between adjacent stops. A minimum of 2 stops is required, with no theoretical upper limit.

Usage Guide

Select Gradient Type

Choose linear, radial, or conic gradient type from the left panel.

Set Angle

Linear and conic gradients support angle adjustment. Drag the slider to change the gradient direction.

Edit Color Stops

Click a stop to select it, then use the color picker to change its color and drag the position slider to adjust its position. Click Add to add a new stop.

Copy CSS Code

Once satisfied, click the "Copy CSS" button and paste the generated CSS code into your stylesheet.

FAQ

Do gradients work in all browsers?

CSS gradients are well supported in all modern browsers (Chrome 26+, Firefox 16+, Safari 7+, Edge 12+). For older browser compatibility, it's recommended to set a solid background as a fallback.

Why are at least 2 color stops required?

A gradient by definition transitions from one color to another — a single stop cannot produce a transition effect. You can adjust stop positions to control the smoothness of the transition.

How do I use the generated gradient in Tailwind CSS?

Tailwind supports arbitrary value syntax. You can use bg-[linear-gradient(90deg,#8b5cf6,#ec4899)] directly. For frequently used gradients, consider extending the theme configuration in tailwind.config.ts.

What are practical uses for conic gradients?

Conic gradients are commonly used to create color wheels, pie charts, circular progress bars, radar sweep effects, and more. Their unique rotational color transition cannot be achieved with linear or radial gradients.