Color Gradient Generator

Build smooth color gradients between any two colors. Adjust the direction, type, and number of steps, then copy the ready-to-use CSS code directly into your project.

Gradient Settings

Start Color

End Color

Type

Direction

CSS Code

Color Steps

Steps: 7

CSS Gradient Tips

Linear gradients are the most versatile — use them for backgrounds, button fills, hero sections, and dividers
Radial gradients emit from a center point and work well for spotlight effects, circular elements, and glowing backgrounds
Add a fallback color in your CSS before the gradient rule for browsers that might not support it: background: #6366f1; background: linear-gradient(...);
Vary the midpoint by adding a percentage stop to shift where the blend happens: linear-gradient(to right, #6366f1 30%, #ec4899)
Use background-clip: text with -webkit-text-fill-color: transparent to apply a gradient to text

After choosing gradient start and end colors, run them through the color contrast checker to make sure any text placed over the gradient meets WCAG accessibility standards at every point, not just the ends.