CSS Gradient Generator

Build linear and radial gradients with multiple color stops and copy the CSS.

CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Tailwind class

bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)]

Settings

Type

LinearRadial

Angle

deg

Color stops (2)

Stop 1 color
Position
%
Stop 2 color
Position
%

Color palette · Stop 1Indigo 500

Presets

How to use

Pick a preset or start from the default gradient.
Choose linear or radial, then adjust the angle, shape or position.
Add, remove and recolor stops, and drag their positions until the preview looks right.
Copy the CSS declaration or the Tailwind arbitrary-value class.

Frequently asked questions

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at a given angle. A radial gradient blends outward from a center point as a circle or ellipse.

Are CSS gradients supported in all browsers?

The unprefixed linear-gradient() and radial-gradient() syntax generated here is supported by all current major browsers.

How many color stops can I use?

There is no practical limit in CSS. This tool lets you add up to 10 stops, which covers almost every design need.

CSS

CSS Box Shadow Generator

Design layered box shadows with offset, blur, spread, opacity and inset controls.

Image

Image Optimizer

Compress and convert PNG, JPG, WebP, AVIF, GIF and SVG images in your browser.

Text

Text Diff Checker

Compare two texts and see added, removed and changed lines with word-level highlights.