🎨 CSS Gradient Generator

About CSS Gradient Generator

Build a CSS gradient visually and copy a ready-to-use background declaration. The preview uses exactly the CSS that is copied, so what you see is what you get.

Key Features

• Three gradient types: linear-gradient, radial-gradient and conic-gradient
• Direction or angle: keyword directions or any angle from 0 to 360°
• Position and shape: center point and circle/ellipse shape for radial and conic gradients
• Color stops: set where each color starts and ends (0-100 %)
• Live preview and one-click copy

How to Use the Tool

• Step 1: choose the gradient type
• Step 2: pick a direction or angle (linear), a shape and position (radial) or a start angle and position (conic)
• Step 3: choose the two colors and, if needed, their positions
• Step 4: click "Copy CSS" and paste it into your stylesheet

Common Use Cases

• Hero sections, buttons and cards backgrounds
• Color wheels and pie-like effects with conic gradients
• Spotlight or vignette effects with radial gradients

Tips & Best Practices

• 0deg points up and angles turn clockwise: 90deg is the same as "to right"
• Setting both positions to the same value creates a hard edge (stripes)
• Gradients are images: use background or background-image, not background-color

Privacy & Security

Everything runs locally in your browser. No data is sent to a server.