CSS Gradient Generator

background: linear-gradient(to right, #6366f1, #ec4899);

How to Use Set the gradient direction using the angle slider. Add color stops and choose a color for each. Select the gradient type: linear, radial, or conic. A live preview updates instantly. Copy the generated CSS code or export it as a Tailwind CSS class. Who Is This For Frontend developers creating gradient backgrounds for pages, sections, or buttons, designers who want to see CSS gradient output in real time, and web development learners who find the CSS gradient syntax confusing. Key Features • Linear / Radial / Conic gradient generation • Multiple color stops • Visual angle and direction control • Instant CSS code output • Tailwind CSS class export Frequently Asked Questions Q: Can I layer a gradient over a background image? A: Yes. Use background: linear-gradient(...), url(image.jpg) to stack gradient layers over an image. Q: Is CSS gradient supported in Internet Explorer? A: IE10 and above support CSS gradients without vendor prefixes. IE9 and below require the proprietary filter property. Q: How do I create a gradient with transparency? A: Use rgba() or the keyword transparent as a color stop value. Tips Stack multiple gradients in the background property to create complex texture effects. For animated gradients, set background-size to 200% and animate background-position — a common trick for smooth flowing gradient effects.