CSS Gradient Generator
Free CSS gradient generator. Build linear or radial backgrounds with a live preview and copy the CSS. Nothing is saved on GraphicByte.
Los nombres, instrucciones y contenidos generados de las herramientas pueden estar en inglés.
background: linear-gradient(135deg, #4F46E5, #06B6D4);
Acerca de esta herramienta
Design a header wash, button fill or Discord-inspired backdrop and copy a single background rule. Switch linear or radial and set the angle for linear gradients.
The preview updates as you move the sliders. Paste the CSS into your stylesheet or a GraphicByte custom brief if you want us to match it.
Cómo usarla
- Choose linear or radial.
- Set the colours and, for linear, the angle.
- Copy the background CSS from the box.
Preguntas frecuentes
Can I add more than two colour stops?
This generator uses a start and end colour. For extra stops, paste the CSS into your editor and add colours by hand.
Does it output Tailwind classes?
It outputs standard CSS. Map the colours to Tailwind theme values if your project uses them.
Is the gradient stored on GraphicByte?
No. It exists only in this page until you copy it.