CSS Gradient Generator

Create beautiful linear and radial gradients with live preview and instant CSS output.

Gradient Type

Angle

deg

Shape & Position

Color Stops

Presets

Generated CSS

How to use CSS gradients

Linear gradients transition colors along a straight line defined by an angle. Use linear-gradient(135deg, #color1, #color2) in your CSS background property.

Radial gradients radiate from a center point outward. Use radial-gradient(circle at center, #color1, #color2) for circular gradients or ellipse for oval shapes.

Color stops let you control where each color appears in the gradient. A stop at 0% is the start, 100% is the end, and you can add up to 5 stops for complex gradients.