ImgColorPicker

CSS Gradient Generator

Design beautiful gradients visually and copy production-ready CSS.

Color stops (click the bar to add, drag to move)
100%

Presets

Your gradients

Click Save to keep a gradient here. Saved gradients stay in this browser.

90°

Code

Download image

How to use the CSS Gradient Generator

  1. Start from a preset, press Space for a random gradient, or choose linear, radial or conic.
  2. Click the gradient bar to add stops, drag them to move, and select one to change its color, position or opacity.
  3. Adjust the angle, shape or center and the color interpolation, and preview it as a background, text or buttons.
  4. Copy the code as CSS, Tailwind, SCSS, SVG or gradient text, download a PNG, or save and share the gradient.

CSS Gradient Generator features

  • Linear, radial and conic gradients, with a repeating option
  • Unlimited color stops with position and opacity
  • OKLab, OKLCH and HSL color interpolation for smoother blends
  • 32 presets and random gradients with the space bar
  • Live preview as a background, gradient text and buttons
  • Export CSS, Tailwind, SCSS, SVG or CSS gradient text
  • Download as a PNG at any size
  • Save gradients in your browser and share them by link

Design CSS gradients visually

This CSS gradient generator lets you build linear, radial and conic gradients by dragging color stops on a bar, and gives you clean, ready-to-paste CSS. Add as many stops as you like, set the angle or center, and watch the result live as a page background, as gradient text or on buttons. When it looks right, copy the code or download the gradient as a PNG image at any size.

Not sure where to start? Pick one of 32 presets, or press Space for a random gradient and keep the ones you like with Save.

Linear, radial and conic gradients

TypeWhat it looks likeExample
LinearColors change along a straight line at any anglelinear-gradient(90deg, #4F46E5, #EC4899)
RadialColors spread out from a center point as a circle or ellipseradial-gradient(circle at 50% 50%, #FDE68A, #F97316)
ConicColors sweep around a center point, like a color wheel or pie chartconic-gradient(from 0deg, #F43F5E, #8B5CF6, #F43F5E)

Turn on Repeating gradient to turn any of them into stripes, rings or rays with repeating-linear-gradient() and friends.

Working with color stops

  • Add a stop: click anywhere on the gradient bar.
  • Move a stop: drag it, or type an exact position in percent.
  • Change a stop: select it and pick a new color or opacity. Transparent stops are great for fading an image or overlay.
  • Tidy up: duplicate or remove stops, reverse the whole gradient or space the stops evenly with one click.

Smoother gradients with OKLab and OKLCH

By default, browsers blend gradient colors in sRGB. Between two saturated colors that can create a muddy gray band in the middle, for example between blue and yellow. Modern CSS lets you choose the color space used for blending:

background: linear-gradient(90deg in oklab, #2563EB, #FACC15);
background: linear-gradient(90deg in oklch, #2563EB, #FACC15);

OKLab gives smooth, even transitions without the gray dip. OKLCH travels around the hue wheel, giving vivid, rainbow-like blends. Both are supported in all current versions of Chrome, Edge, Firefox and Safari. Choose the option in Color interpolation and the code is written for you.

Export options

  • CSS for a background or background-image.
  • Tailwind arbitrary value class for Tailwind CSS projects.
  • SCSS variable to reuse the gradient across a Sass codebase.
  • SVG markup for use in illustrations, icons and design tools.
  • CSS gradient text with background-clip: text for colorful headings.
  • PNG image at a custom width and height, for wallpapers, social media backgrounds, slides or places where CSS is not an option.

Use Share to copy a link that opens your exact gradient, and Save to keep it in your browser's list of gradients for next time.

Why use CSS gradients instead of images?

A CSS gradient is just a few bytes of code, so it loads instantly, stays perfectly sharp on high-resolution screens and scales to any size without blurring or banding from compression. It can also be changed with CSS variables or animated on hover, which an image cannot. For most backgrounds, buttons, overlays and dividers, a CSS gradient is the better choice.

Gradient design tips

  • Gradients between neighbouring hues (blue to purple, orange to pink) almost always look good. Distant hues look best with OKLab or OKLCH interpolation.
  • Keep text readable: test the lightest and darkest parts of the gradient behind your text with the Contrast Checker.
  • Take colors from a photo with the Image Color Extractor, or blend two colors in the Color Mixer and open the result here.
  • Pair a soft gradient background with a layered shadow from the Box Shadow Generator for depth.

CSS Gradient Generator: frequently asked questions

Do CSS gradients work in all browsers?

Linear and radial gradients work in every modern browser. Conic gradients and color interpolation spaces (in oklab) work in all current evergreen browsers.

How do I add more color stops?

Click anywhere on the gradient bar to add a stop at that position. Select a stop and press Delete to remove it.

How do I make a gradient background in CSS?

Use background: linear-gradient(angle, color1, color2), for example background: linear-gradient(90deg, #4F46E5, #EC4899);. Design it here and copy the finished line.

How do I make gradient text?

Choose the CSS gradient text output. It sets the gradient as the background, clips it to the text with background-clip: text and makes the text color transparent.

Why does my gradient have a gray band in the middle?

Browsers blend in sRGB by default, which dulls the midpoint between saturated colors. Set Color interpolation to OKLab or OKLCH to fix it.

Can I download the gradient as an image?

Yes. Set the width and height and click Download PNG. It is useful for wallpapers, slides and social media backgrounds.