Free CSS Gradient Generator: Linear, Radial & Conic

Build a gradient with as many color stops as you like, then copy the CSS or Tailwind code. Everything runs in your browser.

  • 100% free
  • No signup
  • CSS, Tailwind & SCSS
  • Share by link
1
Pick a starting pointClick a gradient to load it.
2
Adjust your gradientType, colors and direction.

Click the bar to add a stop. Drag a stop to move it.

3
Preview & copyPick a format and copy the code.

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Make a CSS gradient in three steps

  1. Pick a starting pointClick a ready-made gradient, or press Random to see something new.
  2. Adjust the colorsDrag the color stops on the bar, click the bar to add more, and change the angle or position.
  3. Copy the codeCopy the CSS or the Tailwind class and paste it into your project.
Why this one

A gradient generator that gets out of your way

Three gradient types

Linear, radial and conic in one tool, with the controls that make sense for each.

Real color stops

Drag stops on the bar, add more, change opacity and see the result instantly.

Copy-ready code

Plain CSS with a fallback color, a Tailwind class, or SCSS. No sign-up.

Share by link

Copy a link that holds your gradient, so a teammate opens exactly what you made.

Tips

Tips for better results

  • Use 2 or 3 colors. Gradients with fewer, well-chosen colors usually look cleaner than rainbow ones.
  • Stay close on the color wheel. Neighbouring hues blend smoothly. Opposite hues can look muddy in the middle, so add a middle stop to guide them.
  • Soften banding. On large areas, add a tiny bit of noise or a second faint gradient on top if you see stripes.
  • Check text contrast. Put your real text on the gradient and check it with the contrast checker.
FAQ

CSS gradient questions

How do I make a CSS gradient?

Choose linear, radial or conic, set your colors and copy the code. A linear gradient looks like background: linear-gradient(135deg, #7c3aed 0%, #fb923c 100%);. Paste it into any CSS rule.

How do I add more than two colors?

Click anywhere on the gradient bar to add a new color stop, then drag it or change its color and position in the list. You can have up to 8 stops.

What is the difference between linear, radial and conic gradients?

A linear gradient changes color along a straight line at an angle. A radial gradient spreads out from a center point like a spotlight. A conic gradient sweeps around a center point, like a color wheel.

Can I use transparency in a gradient?

Yes. Each color stop has an opacity slider. Transparent stops are written as rgba() colors, so they work in all modern browsers.

How do I use the gradient in Tailwind CSS?

Open the Tailwind tab and copy the class. It uses an arbitrary value, such as bg-[linear-gradient(135deg,#7c3aed_0%,#fb923c_100%)], so it works without changing your config.

How do I make gradient text?

Put the gradient on the text element and clip it to the text: background: <your gradient>; -webkit-background-clip: text; background-clip: text; color: transparent;.

Do CSS gradients work in every browser?

Yes. Linear and radial gradients work in all current browsers, and conic gradients work in every major browser released since 2020.

Is my work saved or uploaded?

No. Everything runs in your browser. The Copy link button saves your gradient inside the link itself, so you can share it or come back to it.

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.