Gradient Generator

Create beautiful CSS gradients with multiple color stops

Gradient Type

Angle: 90°

0°90°180°270°360°

Color Stops

100%

Gradient Preview

CSS Code

CSS Property Value

Background Image

1. What are CSS Gradients?

CSS gradients create smooth transitions between two or more colors. They can be used as backgrounds, borders, and other properties. Gradients are rendered by the browser and scale perfectly without pixelation.

2. How does it work?

Gradients work by defining color stops at specific positions along a path. Linear gradients transition colors along a straight line at a specified angle, while radial gradients transition from a center point outward in a circular pattern. The browser smoothly blends colors between each stop, creating seamless transitions. You can control the gradient by adjusting the angle, color values, and position of each color stop (0% to 100%).

Gradient Types

Linear Gradient: Colors transition along a straight line at a specified angle
Radial Gradient: Colors transition from a center point outward in a circular pattern

3. Examples

Linear gradient

linear-gradient(90deg, #667eea 0%, #764ba2 100%)

Radial gradient

radial-gradient(circle, #667eea 0%, #764ba2 100%)

Multi-stop gradient

linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)