CSS Gradient Generator

Build linear gradients with a visual color picker, custom HEX/RGB/HSL colors, or Tailwind's color palette. Copy the finished result as CSS or Tailwind utilities.

CSS-first editing

Design the gradient

Choose any CSS color, start with a Tailwind preset, and keep the preview and every output format in sync.

Settings

Direction and color stops

Middle stop
3 stops
Live previewupdates instantly

Output

Copy the finished gradient

Use CSS by default, or switch to Tailwind utilities and an AI-ready prompt.

CSS

background property

background: linear-gradient(to right, #3b82f6 0%, #a855f7 50%, #ec4899 100%);

Curated gradients

Browse saved gradients, filter by color, and copy the CSS or Tailwind output.

01

CSS output

The CSS output returns a standard background declaration using the exact custom or preset color values you selected. It works in a stylesheet, a CSS module, or an inline style.

  • Use the two-stop version for a simpler transition.
  • Use the middle stop when the gradient needs a stronger color shift.
02

Tailwind output

The Tailwind output returns the direction, from, via, and to utilities as one class string. Tailwind preset colors stay named, while custom CSS colors become arbitrary values such as from-[#316ff6] or via-[rgba(0,0,0,0.5)].

  • Choose any CSS color without leaving the generator.
  • Tailwind palette presets remain available from each color stop.
  • Turn off the middle stop when you only need from and to classes.
03

Prompt output

The prompt includes the direction, selected colors, and the exact outputs to return. Paste it into an AI coding tool when you want the gradient placed into a component or page.

  • Check the generated code before adding it to a production component.
  • Keep the text and controls above the gradient readable at both ends of the transition.
Questions
Can I use the output without Tailwind?

Yes. Use the CSS tab. It returns a standard background declaration and does not require Tailwind.

What does the middle stop do?

It adds a third color at the midpoint. Turn it off for a direct two-color transition.