CSS Gradient Gallery
Explore community gradients. Hover to reveal stops, click to edit, upvote the ones you love.
Create linear or radial gradients, set an angle, and publish stops for UI backgrounds, illustration, and branding.
Gallery data is also available as JSON at /api/gradients.
Featured gradients: Cotton Candy Clouds: #FFB8B8 0%, #FFF2B3 20%, #E4FFB3 40%, #B3DEFF 60%, #E0B3FF 80%. Synth Dusk: #FF1B6B 0%, #45CAFF 100%. Forest Illusion: #0B0E0B 0%, #7B8E7B 26%, #000000 57%, #4A6249 58%, #020302 78%. Halloween Lights: #09531B 28%, #000000 49%, #FF7B00 50%, #372806 100%. Hollywood Orange and Teal: #08C4CF 0%, #FD8902 92%. Pastel Aurora: #84FFC9 0%, #AAB2FF 50%, #ECA0FF 100%. Twilight Lights: #000000 14%, #741111 100%, #FF0000 100%, #000000 100%, #000000 100%. Cinder Glow: #606C88 0%, #3F4C6B 40%, #F2994A 100%
- Gradients
- 56
- API
- https://opencolors.org/api/gradients
Frequently asked questions
What is the OpenColors gradient gallery?
A community gallery of linear and radial CSS gradients. Hover a card to see color stops, click to edit, and upvote gradients you want to reuse.
Can I create my own gradient?
Yes. Use Create gradient to add stops, choose linear or radial, set an angle, and publish it to the gallery.
Are gradients free to use?
Yes. Browse, remix, and copy gradient stops for UI, illustration, and branding. The gallery data is also available at /api/gradients.