CSS Gradient Generator

Create beautiful CSS gradients visually with live preview. Adjust type, angle, colors, and stops, then copy the generated code.

What Is a CSS Gradient?

CSS gradients let you create smooth color transitions between two or more colors. They are rendered natively by the browser, so they scale perfectly at any resolution without needing image files. Gradients can be used for backgrounds, borders, text effects, and more.

Gradient Types

  • Linear — Colors transition along a straight line defined by an angle (0° to 360°)
  • Radial — Colors radiate outward from a center point in a circle or ellipse shape
  • Conic — Colors rotate around a center point like a pie chart or color wheel

How to Use

Choose a gradient type, adjust the angle or shape settings, then customize color stops by picking colors and positions. Add up to 8 stops for complex multi-color gradients, or remove stops to simplify. The preview updates in real time and the generated CSS code can be copied with one click.

Related Tools

🔑 Password Generator Generate strong, random passwords with customizable length and character options. Create secure passwords for all your accounts. 📋 JSON Formatter & Validator Format, beautify, minify, and validate JSON data online. Syntax highlighting and error detection for JSON strings. 🔗 URL Encoder / Decoder Encode or decode URLs and query parameters. Convert special characters to percent-encoding and vice versa. 📱 QR Code Generator Generate QR codes for URLs, text, email, phone numbers, and WiFi. Customize colors and download as PNG image. 📝 Markdown Preview Write Markdown on the left, see rendered HTML on the right in real-time. Copy or download your markdown instantly. 📦 HTML/CSS/JS Minifier Minify HTML, CSS, and JavaScript code online. Remove whitespace, comments, and reduce file size instantly.