CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually with multi-stop support.

0deg90deg180deg270deg360deg
Color Stops
Stop 1#6366f1
0%
Stop 2#ec4899
100%
Generated CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

About This Tool

How to Use
  1. Select a gradient type: linear, radial, or conic
  2. For linear gradients, adjust the angle slider to set the direction
  3. Click the color swatches to change each color stop
  4. Drag the position sliders to move stops along the gradient
  5. Click Add Stop to insert additional color stops
  6. Copy the generated CSS with the Copy button
Common Use Cases
  • Creating gradient backgrounds for web page sections
  • Generating button hover effects and UI highlights
  • Designing hero section backgrounds without image files
  • Building CSS-only decorative elements
Tips & Tricks
  • Use radial gradients for spotlight or vignette effects
  • Conic gradients are great for pie charts and color wheels
  • Add a stop at 0% and 100% to control the full range precisely
  • The copied CSS works directly in any style attribute or stylesheet

You might also like

Color Converter

Convert colors between HEX, RGB, HSL, HSV, CMYK, XYZ, and LAB formats. Bi-directional conversion with live color preview as you type.

Placeholder Image Generator

Generate custom placeholder images for mockups and wireframes in the browser. Set dimensions, background color, text color, and custom label text, then download as PNG or copy the data URI for use in HTML and CSS.

Lorem Ipsum Generator

Generate placeholder text in multiple styles — Classic Latin, Bacon Ipsum, Hipster Ipsum, and Corporate Buzzwords. Control paragraph count, sentence length, and copy with one click.

AI Background Remover

Remove backgrounds from photos using on-device AI — no uploads, no signups, completely free. Powered by browser-based machine learning for total privacy.