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.
Toolnamen, Anleitungen und erzeugte Inhalte können auf Englisch vorliegen.
background: linear-gradient(135deg, #4F46E5, #06B6D4);
Über dieses Tool
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.
So verwenden Sie es
- Choose linear or radial.
- Set the colours and, for linear, the angle.
- Copy the background CSS from the box.
FAQ
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.