Color Tools

CSS Gradient Generator

Build beautiful CSS gradients visually — drag color stops, adjust opacity, set gradient type and direction, and copy production-ready CSS in one click. Supports linear, radial, and conic gradients.

Live preview as you pick Copy HEX, RGB, HSL instantly Browser-only — no upload
135°
Color Stops

Generated CSS

Features

  • Linear, radial, and conic gradient types
  • Drag-and-drop color stops on the gradient bar
  • Add/remove unlimited color stops
  • Alpha/opacity per color stop
  • Direction wheel for linear gradients
  • Radial shape: circle or ellipse
  • Live full-width gradient preview
  • Copy CSS with webkit prefix or clean modern syntax
  • No account, browser-only

How to use it

  1. Choose gradient type: linear, radial, or conic.
  2. Click on the gradient bar to add color stops.
  3. Click any stop to change its color or opacity.
  4. Drag stops to reposition them.
  5. Copy the generated CSS and paste it into your stylesheet.

Use cases

  • Creating hero section background gradients for websites
  • Designing button gradients for UI components
  • Building gradient overlays for image cards
  • Creating colorful progress bars and chart fills

Limitations

  • Browser processing depends on available device memory for very large inputs.
  • Tool-specific limits based on file format or browser support are noted on each tool page.
See also

Related tools

color Browser

Color Picker

Pick any color visually and instantly get HEX, RGB, HSL, and HSV values. Browser-based color picker with live preview — no account needed.

Use tool
color Browser

Color Palette Generator

Generate harmonious color palettes from any base color. Complementary, analogous, triadic, tetradic, and split-complementary schemes — free, browser-based.

Use tool
color Browser

Color Contrast Checker

Check color contrast ratios against WCAG 2.1 AA and AAA standards. Enter foreground and background colors — instant pass/fail results, browser-only.

Use tool
color Browser

Image Color Picker

Upload any image and click to pick colors from it. Extract the dominant color palette and copy HEX/RGB values — browser-only, no upload to server.

Use tool
Questions & answers

Frequently asked

Does the generated CSS work in all modern browsers?

Yes. Modern gradient syntax works in all evergreen browsers. The copy button also provides a -webkit- prefixed version for maximum compatibility.

Can I create transparent gradients?

Yes. Each color stop has an opacity/alpha slider. Set any stop to alpha 0 for a fade-to-transparent effect.