Design tool
CSS Gradient Generator
Build a two-color CSS gradient visually and copy production-ready code.
Runs in your browserbackground: linear-gradient(135deg, #174ea6, #e4c95a);How to use this CSS gradient generator
- Choose the two colors and gradient type. Set an angle for a linear gradient while watching the preview.
- Check the gradient preview, colors, type, and angle before copying the CSS declaration.
- Check the output against the source, then copy or download the finished result.
About this CSS gradient generator
CSS Gradient Generator helps you build a two-color CSS gradient visually and copy production-ready code. The input and result appear together for easy comparison.
You can also use it to change the controls to produce a different result.
Example
Combine two HEX colors at 135 degrees, preview the blend, and copy the resulting linear-gradient declaration.
Common uses
- → build a two-color CSS gradient visually and copy production-ready code
- → change the controls to produce a different result
- → copy a useful result into the project it belongs to