CSS Gradient Generator (Linear & Radial)

What is CSS Gradient?

A CSS gradient generator lets you visually design linear and radial gradients and copy the exact CSS. Gradients are pure CSS — no image files — so they're crisp at any resolution, tiny in size, and easy to animate. This tool gives you a live preview while you add color stops, set the angle or shape, and then exports either raw CSS or Tailwind utility classes.

How to create a CSS gradient

1. 1Choose linear or radial gradient type.
2. 2Add color stops and drag them to position; set the angle for linear gradients.
3. 3Watch the live preview update as you tweak stops and direction.
4. 4Copy the generated CSS (or Tailwind classes) into your stylesheet.

Use Cases

Code Examples

background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);

background: radial-gradient(circle at center, #F59E0B 0%, #EF4444 100%);

Key Concepts

Color stops

Each stop is a color plus an optional position (%). Two stops make a simple fade; more stops create bands and multi-color transitions.

Linear vs radial

Linear transitions along a line defined by an angle (90deg = left-to-right). Radial emanates outward from a center point as circles or ellipses.

Angle direction

In CSS, 0deg points up and angles increase clockwise, so 90deg goes to the right. Keyword forms like 'to right' are equivalent.

Tips & Best Practices

• ▸Modern browsers need no vendor prefixes for standard gradients — the -webkit- prefixes are legacy.
• ▸Add a matching solid background-color fallback for very old browsers.
• ▸Subtle gradients (close hues, low contrast) look more professional than harsh rainbow transitions.
• ▸For arbitrary angles or 3+ stops, use the raw CSS output — Tailwind utilities cover only common cases.