Loading…

How to use Color Gradient CSS

Pick a gradient type, add and position color stops, adjust the angle, and copy the generated background CSS while previewing the result live.

Frequently asked questions

What is the difference between linear and radial gradients?

Linear gradients blend along a straight axis at a chosen angle; radial gradients blend outward from a center point in circles or ellipses.

What is a conic gradient?

A conic gradient sweeps colors around a center point like a pie chart, useful for color wheels and progress rings.

How many color stops can I add?

As many as you like — each stop defines a color and position, and adding more creates richer multi-color blends.

More Developer Tools

Box Shadow Generator
Live CSS box-shadow preview.
Text Shadow Generator
Live CSS text-shadow preview.
Border Radius Generator
Independent corner radius controls.
Flexbox Generator
Visual flex layout + CSS code.
Grid Generator
Visual grid layout + CSS code.
Animation Generator
Generate keyframes with preview.
Meta Tags Advanced
SEO + OG + Twitter meta generator.
Slugify
Convert any text into a clean URL slug — strips accents, lowercases and joins words with a custom separator.
Case Converter (Dev)
Convert identifiers between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Title and Sentence case.
Bytes Humanizer
Turn raw byte counts into human-readable sizes in KiB/MiB (binary) or KB/MB (decimal), and parse sizes back to bytes.
Number Formatter
Format numbers with locale-aware thousands separators and fixed decimals using the Intl API — US, EU, Indian and more.
Base64URL Encoder
Encode or decode UTF-8 text to URL-safe Base64 (base64url) with no padding — ideal for JWTs and query parameters.

← View all Developer ToolsBrowse all 1,100+ tools →