CSS Gradient Generator
Create beautiful CSS gradients visually. Choose gradient type, add color stops, pick from presets, and copy the CSS code to your project.
Settings
Color Stops (2)
CSS Code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);bg-gradient-to-br from-[#667eea] to-[#764ba2]Presets
Frequently Asked Questions
What types of CSS gradients are there?
CSS supports three gradient types: linear (straight line transition), radial (emanating from a center point), and conic (rotating around a center). Each can have multiple color stops for complex effects.
How many color stops can I use?
CSS gradients support unlimited color stops. This tool allows up to 10 stops, which is more than enough for most designs. More stops create smoother transitions and more complex patterns.
Are CSS gradients supported in all browsers?
Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Conic gradients have broad support but may require fallbacks for older browsers. No vendor prefixes are needed for current browser versions.
Can I use gradients with Tailwind CSS?
Yes. For simple two-color linear gradients at standard angles, this tool generates Tailwind utility classes (e.g., bg-gradient-to-r from-blue-500 to-purple-500). For more complex gradients, use the CSS output with Tailwind's arbitrary value syntax or custom CSS.