CSS Gradient Generator

Reference

What are CSS gradients?

CSS gradients let you display smooth transitions between two or more specified colors. CSS provides three types of gradients: linear-gradient (goes in a straight line), radial-gradient (radiates from a center point), and conic-gradient (rotates around a center point).

Gradient types

Linear gradients transition colors along a straight line defined by an angle. Radial gradients radiate outward from a center point in an elliptical or circular shape. Conic gradients rotate color transitions around a center point, like a color wheel.

Color stops

Color stops define the colors in a gradient and their positions along the gradient line. You can add multiple stops to create complex multi-color gradients. Each stop has a color value and an optional position percentage.

Privacy

All gradient generation runs 100% in your browser. No data is sent to any server.