How to use CSS Gradient Gallery
- Browse the gradients.
- Press Copy CSS under the one you like.
- Paste it into your stylesheet.
About this tool
Each gradient is plain CSS (linear-gradient, radial-gradient or conic-gradient) with no images, so it loads instantly and scales to any size. Use them as backgrounds for hero sections, buttons and cards.
To build your own, use the CSS gradient generator.
Frequently Asked Questions
- Do I need vendor prefixes?
- No. Modern browsers support these gradients without prefixes.
- Can I use them as text color?
- Yes, with background-clip: text and a transparent text color.
Related tools
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.
- Color Palette GeneratorBuild a harmonious palette starting from a single color.
- Color Picker from ImageExtract the main colors from a photo, or click any pixel to get its code.
- Color PickerChoose a color and copy its code in every common format.
- Color ConverterPaste a color in any format and see it in all the others.
- HEX to RGB ConverterTurn a HEX color code into red, green and blue values.