Free CSS generators for gradients and color.

Make gradients, shadows, glass effects, and palettes in the browser. Preview the result, then copy CSS, Tailwind, SVG, or React into your project.

Open gradient generatorBrowse all tools

Also available as a Figma plugin. Building with an AI agent? Try GradientDeck UI and GradientDeck Skill.

background-color: #50E3C2; background-image: radial-gradient(at 47% 33%, hsl(162.00, 77%, 40%) 0, transparent 59%), radial-gradient(at 82% 65%, hsl(198.00, 100%, 50%) 0, transparent 55%);

13 tools for backgrounds, motion, and color.

Pick a tool, adjust the preview, and copy the code.

Backgrounds and surfaces7

Background gradients

CSS · Tailwind · AI prompt

Text gradients

CSS · Tailwind

Mesh gradients

CSS · PNG

Patterns

React · Tailwind

Liquid glass

CSS · Tailwind · AI prompt

Box shadows

CSS · Tailwind

Blobs

SVG

Motion2

Animations

CSS

Animated icons

React · TSX

Color4

Color palettes

HEX · RGB · HSL

Image color picker

HEX · RGB · HSL

Palette visualizer

UI preview

Tailwind colors

HEX · RGB · HSL · OKLCH

More from GradientDeck.

For design files, and for building with an AI coding agent.

Figma plugin

Apply gradients, palettes, meshes and glass effects directly in a Figma file.

From the journal.

Read the journal
Cadence, a pricing page built with GradientDeck Skill as a mechanical keyboard
Workflow6 min

Getting a landing page from an AI agent that doesn't look generated

Stripe’s homepage as captured for GradientDeck UI: light headlines, one indigo button beside an outlined one
Workflow5 min

Why “make it look like Stripe” isn't enough, and what a DESIGN.md adds

Heel & Post, a shoe repair page built with GradientDeck Skill
Workflow5 min

Adding a page to an existing app with an AI agent, without design drift

Start with a gradient.

Pick colors and a direction, then copy the CSS or Tailwind classes.

Open gradient generatorBrowse all tools