🌈
CSS Gradient Generator
Create CSS gradients and copy the code.
Loading tool…
How to use the CSS Gradient Generator
- 1Choose two colors.
- 2Adjust the angle.
- 3Copy the generated CSS gradient.
About the CSS Gradient Generator
Free CSS gradient generator — pick two colors and an angle to design a linear gradient with a live preview, then copy the ready-to-use CSS.
Part of our Color Tools collection. Browse all tools.
More Color Tools
→
🎨
Color Converter
Convert colors between HEX, RGB and HSL.
→🟦
CSS Box-Shadow Generator
Design box-shadows with a live preview.
→🌗
Color Contrast Checker
Check WCAG color contrast between two colors.
→🎨
Color Palette Generator
Generate shades, tints and matching colors.
→🖌️
Color Picker from Image
Pick any color from an uploaded image.