What are CSS gradients?

CSS gradients smoothly blend between two or more colors. Three types: linear (straight line transitions, angle-based), radial (transitions outward from center), and conic (rotates around center point). Used for: button hover effects, hero section backgrounds, card highlights, brand color showcases, mood lighting effects, depth without images. Modern browsers support all three. Generate copy-paste CSS with this visual tool.

How to use

1. Pick color 1 and color 2 — Use color picker for any HEX value
2. Choose gradient type — Linear or radial
3. Set angle/direction — For linear: 0-360deg or to right/left/top/bottom
4. Copy generated CSS — Paste into your stylesheet

Formula

Linear gradient: background: linear-gradient(angle, color1, color2);

Radial gradient: background: radial-gradient(shape, color1, color2);

Angles: 0deg = bottom-to-top, 90deg = left-to-right, 180deg = top-to-bottom, 270deg = right-to-left.

Tips

• 135deg gradient: classic diagonal (top-left to bottom-right)
• Subtle gradient: similar colors only 5-10 shades apart
• Bold gradient: complementary colors (opposite on color wheel)
• Add multiple stops for complex transitions: 0%, 50%, 100%
• Radial gradients great for spotlight effects, depth

FAQs

What angle for vertical gradient?

180deg or 'to bottom' for top-to-bottom. 0deg or 'to top' for bottom-to-top. Default (no angle) is 'to bottom' = 180deg.

Can I have 3+ colors?

Yes — add more color stops: linear-gradient(135deg, red 0%, yellow 50%, green 100%);

Browser support?

All modern browsers (95%+ globally). For old browsers (IE9-), use fallback: background: #color; background: linear-gradient(...); — old reads first, new overrides.

Conic gradients?

Newer feature (CSS Images Module Level 4). Modern browsers support it. conic-gradient(red, yellow, green) creates pie-chart-like rotation.

Related

Box Shadow Generator · Color Picker · Hex to RGB Converter