Free · Linear, radial & conic · CSS, Tailwind & PNG

CSS Gradient Generator for Linear, Radial & Conic

Design gradients visually and copy clean code in one click. This CSS gradient generator lets you drag color stops, set angles and positions, check text contrast, smooth colors with OKLCH, and export CSS, Tailwind classes or a full-HD PNG.

  • Drag-and-drop color stops
  • Text contrast checker
  • OKLCH smooth blending
  • Tailwind & PNG export

Live preview

Preview as

Click the bar to add a color stop. Drag a handle to move it, or select it and use the arrow keys. Press Delete to remove it.

Your CSS code

Code format
background: #4f46e5;
background: linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #22d3ee 100%);

The first line is a solid fallback color for very old browsers. PNG exports at 1920 × 1080 using standard sRGB colors.

  • 3Gradient types: linear, radial and conic
  • 12Hand-picked presets to start from
  • 1920×1080PNG export for wallpapers and slides
  • 0Sign-ups, ads in the tool or limits

Made for designers and developers

Why this CSS gradient generator is different

Most gradient tools stop at two colors and a line of code. This one helps you make gradients that look good, stay readable and drop straight into your project.

  • Drag-and-drop color stops

    Add as many stops as you like, drag them along the bar, and fine-tune color, opacity and position.

  • Linear, radial and conic

    Set the angle with a dial, place radial and conic centers on a 9-point grid, or switch to repeating patterns.

  • Built-in contrast checker

    See whether white or dark text stays readable across the whole gradient, with a WCAG pass or fail.

  • Smoother colors with OKLCH

    Blend in the OKLCH color space for bright, even transitions, with a normal sRGB fallback included.

  • CSS, Tailwind or gradient text

    Copy plain CSS with a fallback, a ready Tailwind class, or the full snippet for gradient text.

  • Share or export

    Copy a link that reopens your exact gradient, or download it as a 1920 × 1080 PNG.

Takes a minute

How to use the CSS gradient generator

From idea to production-ready code in five steps.

  1. Start from a preset or pick colors

    Choose a preset, press Random for ideas, or select a stop and pick your own color.

  2. Choose the gradient type

    Pick linear, radial or conic, then set the angle or the center position.

  3. Adjust the color stops

    Click the bar to add stops, drag them into place, and lower opacity for fades.

  4. Check readability

    Look at the contrast panel and the preview headline to make sure text on top stays readable.

  5. Copy and use it

    Pick CSS, Tailwind or gradient text, copy the code, and paste it into your stylesheet or component.

Reference

CSS gradient syntax explained

CSS gradients are images the browser draws for you, so they scale to any size without extra downloads.

Linear gradient

Colors change along a straight line. The angle sets the direction: 0deg runs bottom to top and 90deg left to right.

background: linear-gradient(90deg, #4f46e5 0%, #22d3ee 100%);

Radial gradient

Colors spread outward from a center point, as a circle or an ellipse. Move the center with at top, at left and so on.

background: radial-gradient(circle at center, #fde68a 0%, #f97316 100%);

Conic gradient

Colors sweep around a center point like a clock hand. It is ideal for color wheels, pie charts and loaders.

background: conic-gradient(from 0deg at center, #f43f5e 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #f43f5e 100%);

Gradient text

Paint the gradient as a background, then clip it to the text so only the letters show the colors.

background: linear-gradient(90deg, #4f46e5, #a855f7, #22d3ee);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

Design tips

Tips for better gradients

  • Use neighbouring hues

    Colors close together on the color wheel, such as blue to violet, blend smoothly and feel calm.

  • Fix the muddy middle

    Far-apart colors can turn grey in the middle. Turn on OKLCH or add a bright stop at 50%.

  • Keep text readable

    Aim for at least 4.5:1 contrast across the whole gradient behind body text. Use the contrast panel to check.

  • Prefer soft diagonals

    Angles between 120° and 160° feel natural on cards and hero sections and hide hard edges.

  • Fade to the same color

    For fades, lower the opacity of the same color instead of using transparent, which can add a grey tint.

  • Avoid banding on big areas

    Very subtle gradients across large screens can show steps. Add a middle stop or a light noise texture.

Need exact color values? Convert between HEX, RGB and HSL with our color converter.

Answers

CSS gradient generator FAQs

What is a CSS gradient generator?

A CSS gradient generator is a visual tool for designing gradient backgrounds. You pick the colors, direction and type, see the result live, and copy the CSS code instead of writing it by hand.

How do I create a linear gradient in CSS?

Use background: linear-gradient(angle, color stop, color stop). For example, linear-gradient(90deg, #4f46e5 0%, #22d3ee 100%) fades from indigo on the left to cyan on the right.

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

A linear gradient changes color along a straight line, a radial gradient spreads outward from a center point, and a conic gradient sweeps around a center point like the hands of a clock.

How do I add a gradient to text?

Set the gradient as the text background, then add background-clip: text with the -webkit- prefix and make the text color transparent. Choose Gradient text in the code panel to copy the full snippet.

How do I use this gradient in Tailwind CSS?

Choose Tailwind in the code panel. You get an arbitrary value class such as bg-[linear-gradient(135deg,#4f46e5_0%,#22d3ee_100%)] that works in Tailwind 3 and later without changing your config.

How do I make a gradient fade to transparent?

Lower the opacity of the last color stop instead of using the transparent keyword. Fading to a see-through version of the same color avoids the grey tint that can appear otherwise.

Why does the middle of my gradient look grey or muddy?

Blending two far-apart colors in the default sRGB color space passes through dull, greyish tones. Turn on Smooth colors to use OKLCH blending, or add a bright color stop in the middle.

Do all browsers support CSS gradients?

Linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari. OKLCH blending needs a recent browser, so the generated code includes a standard fallback first.

Can I download the gradient as an image?

Yes. Press Download PNG to save a 1920 by 1080 image, which works well for wallpapers, slides and social media backgrounds.

Make your next gradient in seconds

Use the CSS gradient generator to design, check and copy gradients for buttons, backgrounds, text and hero sections, all in one place.

Open the generator

All gradients are created in your browser. Nothing you make is uploaded or stored on our server.

Scroll to Top