Free Gradient Generator

Build linear and radial CSS gradients with a live preview, unlimited colour stops and one-click copy. Runs entirely in your browser.

  • 100% free
  • No sign-up

Popular presets

Planning a new website?

We design fast, mobile-first websites that look sharp on every screen and turn visitors into enquiries.

See our web design services →Book a strategy call
01Overview

What is a CSS gradient generator?

A CSS gradient is a smooth transition between two or more colours, drawn by the browser instead of loaded as an image. Gradients load instantly, scale to any size and stay sharp on every screen.

This free CSS gradient generator builds linear and radial gradients with a live preview. Add unlimited colour stops, drag each stop's position, set the angle, try a random gradient for inspiration, then copy the CSS in one click.

Use it for hero backgrounds, buttons, cards, overlays on images and social media graphics.

Quick answer

Choose linear or radial, pick your colours and set the angle. The generator writes CSS like background: linear-gradient(135deg, #024C96 0%, #0367C6 100%); which you can paste into any stylesheet or page builder.

  • Free, no sign-up
  • Linear and radial
  • Unlimited colour stops
  • Copy CSS
02How to use

How to use the Gradient Generator

Two or three colours usually look cleaner than many.

  1. Choose a type

    Linear flows in a direction. Radial spreads out from a centre point.

  2. Set colours and stops

    Pick each colour and drag its position from 0% to 100%.

  3. Adjust the angle

    135 degrees, top-left to bottom-right, is a popular default.

  4. Copy the CSS

    Paste it into your stylesheet, Elementor custom CSS or theme settings.

03How it works

CSS gradient syntax

Gradients are values for the background or background-image property.

Gradients you can copy
Brand blue
Sunrise
Mint
Soft glow
Photo overlay
Hard stop
Example CSSbackground: linear-gradient(135deg, #024C96 0%, #0367C6 100%); background: radial-gradient(circle, #FFFFFF 0%, #EEF4FB 100%); /* Overlay on a photo */ background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.1)), url(hero.jpg);

CSS gradients are supported by all modern browsers without prefixes.

Worked example

A hero section background.

Type
Linear
Angle
135 degrees
Stop 1
#024C96 at 0%
Stop 2
#0367C6 at 100%
A subtle two-tone blue gradient that adds depth without distracting from the headline.
04Reference

Gradient types and angles

Quick reference for common settings.

SettingEffectCommon use
linear 90degLeft to rightProgress bars, buttons
linear 180degTop to bottomImage overlays, page backgrounds
linear 135degDiagonal, top-left to bottom-rightHero sections, cards
radial circleGlow from the centreSpotlights, soft backgrounds
Hard stops (same %)Sharp stripes, no blendPatterns, split backgrounds
05Tips

Gradient design tips

Subtle gradients usually look more premium than dramatic ones.

Do this

  • Use neighbouring huesColours close on the colour wheel blend smoothly without muddy middles.
  • Keep text readableCheck contrast at the lightest point of the gradient behind your text.
  • Add overlays to photosA dark gradient over an image makes white headlines readable.
  • Stay on brandBuild gradients from your palette so they feel consistent.

Gradient mistakes to avoid

  • Opposite coloursBlending complementary colours, like red to green, creates a grey, muddy middle.
  • Too many stopsRainbow gradients look dated and distract from content.
  • Using images for gradientsImage files load slower and blur when scaled. Use CSS.
  • Ignoring bandingVery large, subtle gradients can show visible steps. Add a third mid-point stop.
06FAQ

Frequently asked questions

How do I make a gradient in CSS?

Use background: linear-gradient(direction, colour1, colour2); for example linear-gradient(135deg, #024C96, #0367C6). The generator writes this for you.

What is the difference between linear and radial gradients?

Linear gradients change colour along a straight line. Radial gradients spread outward from a centre point in a circle or ellipse.

How do I add a gradient in Elementor?

Set the section background type to Gradient and enter the colours, or paste the generated CSS into Advanced, Custom CSS.

Can I add more than two colours?

Yes. Add as many colour stops as you like and position each one.

Are CSS gradients good for performance?

Yes. They are drawn by the browser, so there is no image to download.

Can gradients be transparent?

Yes. Use rgba colours or the transparent keyword, which is useful for overlays on images.

The Big Growth team

Want a website that looks this polished?

We design and build fast, accessible, conversion-focused websites on WordPress and custom stacks. Explore our web design services.

Talk to our design team Browse all free tools