Best Free CSS Gradient Generator
Build linear and radial CSS gradients with a live preview — copy the background code.
100% free
No signup
No watermark
Files processed in memory, never stored
✨
Go Pro for the best AI models — image, video and chat — plus bigger uploads, priority in the queue and no waiting.
Upgrade to Pro
Love best.free? Share it
How it works
- Pick a type. Choose linear or radial, and set the angle for a linear gradient.
- Choose colours and stops. Set two or more colours and their positions; add a third stop in Advanced options.
- Copy the CSS. Hit Copy CSS and paste the background gradient into your stylesheet.
About this tool
Build a CSS gradient by eye instead of editing values blind. Switch between linear and radial, drag the angle for a linear gradient, and choose colours and positions for at least two stops while a full-width preview bar updates live. Copy the resulting background property straight into your stylesheet. The Advanced options add a third colour stop for richer blends and let you pick a circle or ellipse shape for radial gradients. It all runs in your browser.
What people use it for
- Design a hero or section background gradient
- Create a button or card gradient fill
- Blend two or three brand colours smoothly
- Generate a radial spotlight or vignette effect
Frequently asked questions
A linear gradient blends along a straight line at the angle you choose; a radial gradient blends outward from a centre point as a circle or ellipse.
For a linear gradient the angle sets the direction of the blend — 0° goes bottom-to-top, 90° left-to-right, and so on.
Each stop is a colour placed at a percentage along the gradient. Moving a stop changes where that colour sits and how sharp the blend is.
Yes. Open Advanced options to add a third colour stop, inserted between the first and last for a multi-colour blend.
No. The colours and stops are turned into a CSS string locally in your browser.
Completely free, no account and no limits — a client-side tool with nothing to meter.
Yes. It runs in your browser, so CSS Gradient Generator works on phones and tablets as well as desktop — there is no app to install.
Usually just a few seconds for a typical file — CSS Gradient Generator starts working the moment you give it your input.
Casual use is unlimited, under a generous fair-use cap that keeps it fast for everyone.
All modern browsers — Chrome, Safari, Firefox and Edge. CSS Gradient Generator needs nothing installed beyond the browser you already use.