CSS Gradient Generator

CSS gradients replaced thousands of gradient image files when they became widely supported around 2012. A gradient that previously required a 1px-wide PNG image (with all its HTTP request overhead) became a single line of CSS. Today, gradients are one of the most versatile tools in a front-end developer's toolkit — used for backgrounds, overlays, text fills, borders, and progress indicators.

Linear gradients — direction and angle

A linear gradient transitions colors along a straight line. The direction is controlled by an angle or a keyword:

to bottom (default) — top to bottom, same as 180deg
to right — left to right, same as 90deg
to bottom right — diagonal
45deg — any angle from 0 to 360

0deg points upward (bottom to top). Angles increase clockwise. 90deg = left to right. 180deg = top to bottom. This is different from CSS transforms where 0deg is to the right.

Radial gradients — shape and position

Radial gradients radiate outward from a center point. The shape can be circle (equal radius in all directions) or ellipse (default, stretches to fit the element). The center position is set with at: radial-gradient(circle at top left, red, blue). Use radial gradients for spotlight effects, glows, and circular color transitions.

Color stops and hard transitions

Color stops define where each color starts and ends. By default, colors transition smoothly between stops. To create a hard edge (no transition), place two stops at the same position: linear-gradient(red 50%, blue 50%) creates a sharp split with no blending. This technique is used for striped patterns, progress bars with distinct segments, and flag-style designs.

Practical gradient recipes

Subtle card background: linear-gradient(135deg, #f5f7fa, #c3cfe2)
Dark overlay on image: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8))
Gradient text: Apply gradient as background, then -webkit-background-clip: text; -webkit-text-fill-color: transparent
Animated gradient: Use background-size: 200% and animate background-position for a moving gradient effect
Striped pattern: Repeating linear gradient with hard stops creates CSS-only stripes without images

Browser support

Linear and radial gradients are supported in all browsers released after 2012. The -webkit- prefix is no longer needed for modern browsers but is sometimes included for compatibility with very old Safari versions. Conic gradients (for pie charts and color wheels) have good support in modern browsers but may need a fallback for older ones.

CSS Code Generated Locally

This tool runs entirely in your browser. No data is sent to any server.

Frequently Asked Questions

A linear gradient transitions colors along a straight line (top to bottom, left to right, or any angle). A radial gradient radiates outward from a center point in a circular or elliptical pattern. Linear gradients are more common for backgrounds; radial gradients work well for spotlight or glow effects.

Add additional color stops by clicking the Add Color Stop button. Each stop has a color and a position (0-100%). You can create smooth multi-color gradients or hard transitions by placing two stops at the same position.

The angle controls the direction of a linear gradient. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom, and 270deg goes right to left. Any angle between 0 and 360 is valid.

Yes. Use the CSS properties background: your-gradient; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; on your text element. This clips the gradient to the text shape.

Linear and radial gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit- prefix is no longer needed for modern browsers but is still sometimes included for older Safari compatibility.

🌈 CSS Gradient Generator