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

Related Tools

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.

Favicon Generator

Generate a complete favicon package from any image or emoji. Creates PNG at all standard sizes (16x16 to 512x512) and Apple Touch icons — download individually or all at once.

Image Grayscale Converter

Convert your images to grayscale effortlessly. Perfect for artistic transformations and detailed image analysis.