How do I create a linear gradient?

Select Linear as the gradient type, use the angle slider to set direction, add color stops by clicking on the gradient bar.

Can I use multiple color stops?

Yes, you can add as many color stops as needed by clicking on the gradient bar. Drag stops to adjust positions or double-click to change colors.

How do I copy the CSS code?

Click the Copy button next to the CSS code output to copy it to your clipboard.

CSS Gradient Generator

Create beautiful gradients visually and copy the CSS code

Gradient Editor

Type:

Angle: deg

Color Stops (click to add, drag to move, double-click to change color)

Preview

CSS Code

Preset Gradients

Frequently Asked Questions

A CSS gradient is a special type of image that smoothly transitions between two or more colors. It's created using CSS without needing an actual image file, making it lightweight and customizable.

Select "Linear" as the gradient type, then use the angle slider to set the direction (0° = top to bottom, 90° = left to right). Add color stops by clicking on the gradient bar and adjust their positions by dragging.

Linear gradients transition colors along a straight line, while radial gradients radiate from a center point outward in an elliptical or circular pattern. Linear gradients are great for backgrounds, while radial gradients work well for highlights and spot effects.

Yes! You can add as many color stops as you need by clicking on the gradient bar. Each stop can have its own color and position. Drag stops to adjust their positions or double-click to change their color.

Simply click the "Copy" button next to the CSS code output. The code will be copied to your clipboard automatically. You can then paste it into your CSS file or inline style attribute.