Gradient Generator

Build linear, radial or conic CSS gradients. Pick your colors and angle, preview live, and export in one click.

Settings

Preview

Preview

Code


            
            
            

User guide

Three gradient functions exist: linear-gradient, radial-gradient and conic-gradient. They go in the background property.

  • The angle only applies to linear and conic gradients.
  • Add a 3rd color for richer transitions.

FAQ

How do I animate a gradient?

Enlarge background-size then animate background-position with @keyframes for a moving gradient effect.

Linear vs radial?

linear runs along a straight line and angle; radial radiates from a center point outward.