CSS Color Gradients
Ready-to-use gradients, warm, cool, pastel, vivid or dark: copy the CSS code or open them in the gradient maker.
Collections created by KSPNAI, free to use.
About this tool
This library offers 70 ready-to-use CSS color gradients, created by KSPNAI and free to use. They are linear gradients with two or three colors, sorted into seven themes: warm, cool, pastel, vivid, dark, nature and sunset. Use them as a website background, a banner, a button or a social media visual.
Each gradient shows a preview and its HEX codes. Clicking Copy CSS puts a background: linear-gradient(…) line on your clipboard, ready to paste into your stylesheet. To change the angle or colors, or to export an image, click Edit: its colors open in the gradient maker. The selected theme is kept in the page address.
- 70 linear gradients with 2 or 3 colors
- 7 themes, from warm to dark
- Copy the CSS code in one click
- HEX code of every color shown
- Edit in the gradient maker
How to use it
- Pick a theme in the filters, or stay on All.
- Find a gradient by its preview.
- Click Copy CSS and paste the code into your stylesheet.
- Click Edit to fine-tune it in the gradient maker.
Frequently asked questions
What code is copied exactly?
A complete CSS declaration, for example background: linear-gradient(135deg, #c87023 0%, #30b075 100%); which you can paste as is into a CSS rule.
Can I use these gradients freely?
Yes, these are collections created by KSPNAI and free to use, for a website, an app or a visual.
Is it free?
Yes, free and with no account. The gradients come with the page: nothing is sent, copying goes to your clipboard.
How do I get the gradient as a PNG image?
Click Edit: its colors open in the gradient maker, where you set the angle and gradient type and then download a PNG image.