Skip to content
KuponGuru

CSS Gradient Generator

Linear, radial and conic gradients with up to eight color stops, a live preview, and CSS or Tailwind to copy.

FreeRuns in your browser

About the CSS Gradient Generator

Design a gradient visually and copy clean CSS. Switch between linear, radial and conic, drag the angle and position, add up to eight color stops and move them along the line. Start from a preset or a random gradient, then copy the CSS declaration or a ready-made Tailwind arbitrary-value class.

How to use it

  1. 1Choose linear, radial or conic, or start from a preset.
  2. 2Set the colors, their positions and the angle.
  3. 3Copy the CSS or the Tailwind class.

Questions

Do these gradients work in every browser?

Yes. Linear, radial and conic gradients are supported by all current versions of Chrome, Edge, Firefox and Safari, on desktop and mobile, with no prefixes.

How do I use the Tailwind class?

Paste it into an element's class list. It uses Tailwind's arbitrary-value syntax, with spaces written as underscores, so it needs no changes to your Tailwind configuration.

Is my text uploaded or stored?

No. The tool runs in this browser tab. What you paste is never sent to KuponGuru, and it is gone when you close the tab.

Related tools

NewFree

Box Shadow Generator

Layered CSS box shadows with a live preview — soft, lifted, sharp or inner — copied as CSS or a Tailwind class.

DesignUse tool
NewFree

Color Palette Generator

Complementary, analogous, triadic and more from one color, plus a 50–950 shade scale to export as CSS or Tailwind.

DesignUse tool
NewFree

Color Converter

Convert any color between HEX, RGB, HSL, OKLCH, HSV and CMYK — type it the way you have it, copy it the way you need it.

DesignUse tool

Looking for something else? Browse every tool.