Utiltown

CSS Gradient Generator

Visually design a CSS gradient — linear or radial — with multiple color stops, an adjustable angle, and hard-stop edges. Copy the CSS straight into your stylesheet, save or share your gradients, and export a PNG preview. Everything runs locally in your browser.

All computations run locally in your browser, no data uploaded to server. 
 
 
 
   
 
   
  
  
  
 
 
Presets
 
 
 
 
My Gradients
 
  
 
 
  
 
 
Gradient Text
 

The gradient you designed above, applied to text. Edit the sample text,
        watch it fill with the current gradient, and copy ready-to-paste CSS.

 
 
 
Gradient Text
  
 
 
 
   
 
   
 
   
 

The CSS clips the same background gradient to your text with
background-clip: text, so editing the stops above
            updates this preview too.

 
 
 
  
 
How To Use
 
     
  1. 
Choose Linear or Radial. For
          linear, drag the angle slider to set the direction; for radial,
          pick a shape and position.

    2.  
  2. 
Use the color stops to set each color and its position. Add more
          stops with + Add stop, and drag two stops onto the
          same position to create a hard edge.

    3.  
  3. 
Watch the live preview and the generated CSS update as you drag.

    4.  
  4. 
Click Copy CSS to paste the background declaration
          into your stylesheet.

    5.  
  5.  Save to keep it in My Gradients, grab a
share link to send the exact gradient, or
Download PNG for a preview image.

    6.  
 
 
 
Usage Example
 
With a 135° linear gradient and three stops, the tool outputs:
 
background: linear-gradient(135deg, #2563eb 0%, #f59e0b 50%, #ec4899 100%);
 

Paste that line into any CSS rule and the element renders the exact
        gradient shown in the preview. The HEX ladder gives you the same
        stops as plain hex values for older tools.

 
 
 
Use Cases
 

A gradient generator speeds up UI and brand work. Build hero-section
        backgrounds, button fills, and card accents with linear gradients and
        tune the angle until the light direction looks right. Use radial
        gradients for subtle glows, spotlight effects, and depth behind
        product shots. Create stripes or crisply divided panels with hard
        stops, then copy the exact CSS into your stylesheet or design tokens.
        Save reusable palettes as gradients, share them with teammates via a
        short link, and export a PNG to drop into documentation or slides.

 
 
 
Best Practices
 
     
  • 
Start from a small number of stops (two or three) and add more only
          when the blend really needs them — extra stops rarely help.

    •  
  • 
Keep color contrast in mind: a very dark stop next to a very light
          one can make text unreadable if it sits behind content.

    •  
  • 
Use the 135° default direction unless you have a
          reason: it reads as a natural top-left to bottom-right light.

    •  
  • 
Test radial gradients on different sizes — a glow that looks right
          on a phone may look tiny on a desktop hero.

    •  
  • 
Copy the CSS rather than a screenshot so the gradient stays crisp
          at any resolution.

    •  
 
 
 
Frequently Asked Questions
  
Is the gradient generator free and local?
 
Yes. It is 100% free and runs entirely in your browser. You design the gradient, copy the CSS, and go — nothing is uploaded or stored on a server.
  
Which gradient types are supported?
 
Linear gradients (with a 0–360° angle) and radial gradients (with circle or ellipse shape and a position). Conic gradients are planned but not included in this version.
  
What is a hard stop?
 
A hard stop creates an abrupt color boundary instead of a smooth blend. Place two color stops at the exact same position and the transition snaps at that point, which is useful for stripes and crisp dividers.
  
How do I copy the CSS?
 
Click Copy CSS to grab the full background declaration (for example background: linear-gradient(135deg, #ff0000 0%, #0000ff 100%);) and paste it into your stylesheet.
  
What is the HEX ladder?
 
The HEX ladder lists the color stops as plain hexadecimal values so you can recreate the same gradient in older tools or editors that do not read modern CSS gradient syntax.
  
How does the share link work?
 
The share link encodes only the gradient spec (type, angle, and color stops) into the URL hash. Opening it rebuilds the exact gradient instantly. Only compact settings are encoded, so links stay short.
  
Where are my saved gradients stored?
 
Only in your own browser, using the site’s local storage and reported by the Privacy panel. Nothing is uploaded. Clear them anytime with the Remove all control.
  
How do I make gradient text?
 
Use the Gradient Text section below the main generator. It takes the gradient you built, clips it to your text with background-clip: text, and gives you a copy-ready CSS block — set the text, font size, and weight, then click Copy text gradient CSS. The background declaration it depends on is the same one the Copy CSS button produces for the main preview.
  
Do I need vendor prefixes?
 
Modern browsers support the unprefixed syntax this tool outputs. For very old browsers you may add -webkit- or -moz- prefixes, but they are unnecessary on current Chrome, Firefox, Safari, and Edge. The gradient text CSS includes a -webkit-background-clip fallback because Safari and older Chromium builds only honor the prefixed form.
  
 
 
Complete the Visual Toolkit
 

Need your finished gradients smaller for the web?
Compress images to WebP / PNG / JPEG —
        local-only, nothing is ever uploaded.

 
 
Related Tools