CSS Gradient Generator

Create a smooth two-color CSS gradient with a live preview and ready-to-copy code.

Start color (hex)

End color (hex)

Direction

Was this tool helpful? Thanks for the feedback!

CSS gradients let you blend two or more colors without an image. This generator outputs a standard linear-gradient() you can paste straight into a background property, with a live preview so you can see the blend before you ship it.