CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code.
Configuration
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);This tool lets you visually build a CSS gradient - picking colors, direction, and type (linear or radial) through a visual interface - and gives you the exact CSS code to copy into your project, instead of manually tweaking gradient syntax and guessing at the visual result.
Frequently asked questions
Yes - both major gradient types are typically supported, letting you build the style that fits your design.
Yes - multi-stop gradients with several colors are generally supported, not just a simple two-color blend.
Yes - the output is standard CSS you can copy directly as a background or background-image value.