CSS Gradient Generator
Create and customize CSS linear or radial gradients. Preview live and copy the CSS code instantly.
Presets:
Runs entirely in your browser — no data sent anywhere. Explore all free tools · Etsy Shop ↗
Frequently Asked Questions
What is the CSS gradient syntax?
linear-gradient(direction, color1, color2). Direction can be degrees (135deg) or keywords (to right, to bottom). Multiple stops: linear-gradient(90deg, red 0%, blue 50%, green 100%). The color stop percentages control where each color transitions.
Can I use gradients as text color in CSS?
Yes! Use: background: linear-gradient(…); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text. This makes the gradient show through the text characters.