Create Stunning Gradients Without Writing Code
Gradients are one of the easiest ways to make a website feel modern. A soft blend of colours behind a heading, a button or a whole page adds depth that flat colours can't. Writing gradient CSS by hand, though, means guessing angles, juggling percentages and refreshing the page again and again until it looks right.
This gradient generator lets you design visually instead. Pick your colours, drag them where you want them, choose the direction, and watch the large preview update instantly. When you are happy, copy the ready-made CSS and paste it into your stylesheet. Everything runs in your browser, and your last design is remembered the next time you visit.
How to Use the Gradient Generator
- Choose a gradient type: Linear, Radial or Conic.
- Set the direction with the angle dial or slider, or pick a centre point for radial and conic gradients.
- Edit the colours under Colour Stops. Click a swatch to pick a colour, type a hex code, or change the position and opacity.
- Drag the handles on the bar inside the preview to move colours, or click anywhere on the bar to add a new one.
- Click Copy CSS, or download your gradient as a full-HD PNG image.
Stuck for ideas? Press Random for a fresh colour combination, or start from one of the presets and adjust it. Every change can be undone.
Linear, Radial and Conic Gradients Explained
- Linear gradients blend colours along a straight line. An angle of 90 degrees runs from left to right, 180 degrees from top to bottom, and anything in between creates a diagonal. They are the most popular choice for backgrounds, banners and buttons.
- Radial gradients spread outward from a centre point in a circle or an ellipse. They work beautifully for glows, spotlights and soft vignettes behind a product photo.
- Conic gradients sweep colours around a centre point, like the hands of a clock. They are perfect for colour wheels, pie-chart effects and eye-catching circular designs.
Understanding Colour Stops
A colour stop is simply a colour plus a position along the gradient, written as a percentage. A stop at 0% sits at the very start and a stop at 100% at the very end. When two stops are far apart, the blend between them is long and gentle. Move them close together and the change becomes sharp.
You can add as many stops as you like, which lets you build rich multi-colour effects. Each stop also has its own opacity, shown with the α symbol. Lowering it lets the colour fade towards transparency, which is handy for overlays that sit on top of a photo so the image still shows through.
Clean CSS You Can Paste Anywhere
The code panel offers three formats. The background format gives you a ready-to-use rule that includes a solid fallback colour, calculated from your gradient, for very old browsers. The CSS variable format stores the gradient in a custom property, so you can reuse it across many elements and change it in one place. The gradient text format fills text with your gradient, a popular effect for headlines. This website uses that same technique for its orange titles.
All three formats use standard CSS that works in every modern browser, including Chrome, Safari, Firefox and Edge on both desktop and mobile. No prefixes or extra libraries are needed.
Tips for Better-Looking Gradients
- Stay close on the colour wheel. Neighbouring colours, such as orange to red or blue to purple, blend smoothly. Opposite colours can turn muddy grey in the middle.
- Add a middle stop if the blend between two very different colours looks dull. A brighter colour in the centre keeps it vibrant.
- Check text contrast. If you place text on a gradient, make sure it stays readable across the whole area, not just at one end.
- Be subtle for backgrounds. Gentle gradients feel calm and professional, while bold ones work best in small doses, like buttons and badges.
- Reuse your brand colours. A gradient built from your existing palette ties a design together and looks intentional.
Why CSS Gradients Beat Background Images
A gradient written in CSS is drawn by the browser itself, so there is no image file to download. That keeps pages lighter and faster, especially on mobile data. CSS gradients also stay perfectly sharp on any screen, from a small phone to a large 4K monitor, and you can change a colour in seconds without opening an image editor.
Use Your Gradient as an Image
Not everything accepts CSS. Presentation slides, social media posts, phone wallpapers and video thumbnails need a picture. The PNG button saves your gradient as a 1920 × 1080 image, the same size as a full-HD screen, so it stays sharp almost anywhere. The image is created on your own device and downloads straight away.