Use this free CSS gradient generator to create beautiful linear or radial gradient backgrounds for thumbnails, web designs and social media graphics. Customise the colours, direction and type, then copy the CSS code and use it in any project instantly.
Gradients are everywhere in modern creator content — thumbnail backgrounds, story overlays, brand graphics, lower thirds, outro screens. A well-chosen gradient adds depth and visual interest without the complexity of a full illustration. The problem is generating one that actually looks good requires some colour theory knowledge. This tool handles that for you.
Choose your colours, set the direction, and get a CSS gradient code or a downloadable image you can use directly in your designs. The gradient updates in real time so you can see exactly what you're getting before you copy it.
Step 1 — Choose your two (or more) colours. Start with your brand colours if you have them. If you're experimenting, try a dark-to-light version of one colour, or two complementary colours from opposite sides of the colour wheel. Avoid combining more than three colours until you're confident with gradients — too many often looks muddy.
Step 2 — Set the gradient direction. Linear gradients can run horizontally, vertically, or diagonally. Radial gradients spread outward from a central point. For thumbnail backgrounds, diagonal gradients often look the most dynamic.
Step 3 — Copy the CSS or download the image. Use the CSS code if you're adding the gradient to a website. Download as a PNG or JPEG if you're using it in design software like Canva or Photoshop.
Combining colours that create a muddy middle zone. Some colour combinations look great at either end but create an unpleasant grey or brown in the transition. Preview the full gradient before committing — if the middle looks off, shift one colour slightly to fix it.
Using too many colour stops. Adding five or six colours to a gradient usually makes it look like a rainbow experiment. Two or three well-chosen colours nearly always look more professional than a multi-colour blend.
Ignoring how the gradient looks with text on top. If you're using the gradient as a background, make sure there's enough contrast for any text you'll add over it. A gradient that goes from light to dark is ideal — put dark text over the light side and light text over the dark side.
A CSS gradient is a code instruction that tells a browser to draw a smooth colour transition between two or more colours. It's used in web design to create backgrounds, overlays and decorative elements without needing an image file. The code this tool generates can be pasted directly into a stylesheet.
A linear gradient transitions in a straight line — left to right, top to bottom, or at any angle. A radial gradient starts at a central point and expands outward in a circular or elliptical pattern. Radial gradients are often used for spotlight or vignette effects.
Canva has a built-in gradient background option. You can also upload a PNG of your gradient from this tool as a background image. For more control over the exact colours and direction, this generator is a better starting point.
Dark purple to deep blue, coral to gold, and teal to navy all tend to pop well on both YouTube's light background and TikTok's dark interface. Avoid very light-to-light gradients which look washed out on screen.
Gradients add depth to flat designs, make overlaid text more readable, and give thumbnails and graphics a polished, modern feel. Many of the most-clicked YouTube thumbnails use gradient backgrounds to create contrast and visual hierarchy. A well-chosen gradient can make the difference between a thumbnail that gets ignored and one that gets clicked.