CSS Gradient Generator
Design a gradient background visually and copy ready-to-use CSS. Supports linear, radial and conic gradients with two or three colours.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
How CSS gradients work
linear-gradient(135deg, …)blends colours along a straight line. 0° goes bottom to top, 90° left to right.radial-gradient(circle, …)blends outward from the centre.conic-gradient(from 0deg, …)sweeps colours around a centre point, like a pie chart.
The code includes a solid background colour first, as a fallback for very old browsers. All modern browsers support gradients.
Design tips
- Neighbouring hues (purple to pink) look smoother than opposites (red to green), which can turn muddy in the middle.
- Check text on gradients with the contrast checker at both ends.
Frequently asked questions
Can I use gradients on text?
Yes. Add background-clip: text and color: transparent to the element.
Do gradients slow down a page?
No. CSS gradients are drawn by the browser and are lighter than image files.
How do I make a transparent gradient?
Use a colour with alpha, like rgba(91, 61, 245, 0) as one of the stops.
Related tools
QR Code Generator
Free QR codes for links, Wi-Fi, text and contacts.
Discord Server Template
Design channels and roles, then build them in one click.
Discord Moderation Bot
Make your own mod bot with kick, ban, mute and filters.
Discord Bot Maker
Build a custom Discord bot without coding.
Discord Welcome Bot
Custom welcome messages and auto-roles for new members.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.