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.
Les noms, instructions et contenus générés des outils peuvent être en anglais.
background: linear-gradient(135deg, #4F46E5, #06B6D4);
À propos de cet outil
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.
Comment l’utiliser
- 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.