CSS Linear Gradient Generator

Summary

Pick colors and an angle to generate ready-to-paste CSS linear-gradient code.

How it works

1. Add two or more color stops using the color pickers
2. Set the gradient angle with the slider
3. Copy the generated CSS and paste into your stylesheet

Use cases

• Create hero section backgrounds
• Design gradient buttons and banners
• Build animated gradient backgrounds

Frequently Asked Questions