Can I use gradients on text?

Yes — apply the gradient to background-image, then add background-clip: text and -webkit-background-clip: text, and set color: transparent. This clips the gradient to the text shape.

Are CSS gradients supported everywhere?

Yes. Linear and radial gradients are supported in all modern browsers. The -webkit- prefix is no longer needed for current browsers but may be needed for very old Safari.

Is my data uploaded to a server?

No. Everything runs locally in your browser using JavaScript. Your data never leaves your device.

How do I create a diagonal gradient?

Use a linear gradient with an angle like 45deg or 135deg. You can also use keywords: to top right, to bottom left, etc.

🌈

Gradient Palette Generator

Create beautiful multi-stop color gradients with live preview and full CSS export. Add, remove and reorder stops. Linear and radial gradient support. Free.

🎨 Design & Color Tools Free Browser-based

Tool

Type

Angle 90°

Radial shape

CSS Gradient Syntax

CSS gradients are generated with linear-gradient(angle, color1 pos%, color2 pos%, ...) or radial-gradient(shape, color1 pos%, color2 pos%, ...). They can be used in any CSS property that accepts an image, including background, background-image and border-image.

Gradient Tips

Technique	How
Hard stop	Place two stops at the same position
Transparent fade	Use rgba(0,0,0,0) as a stop color
Multi-color	Add 3–5 stops for complex gradients
Repeating	Use repeating-linear-gradient()

Gradient Palette Generator

CSS Gradient Syntax

Gradient Tips

Frequently Asked Questions