CSS Tools
Inar CSS Gradient Generator
Free Inar CSS Gradient Generator to create custom CSS gradients, adjust colors and directions, and instantly copy ready-to-use CSS code.
Inar CSS Gradient Generator
Build Linear, Radial & Conic Gradients — with a Draggable Stop Editor
A professional online CSS gradient generator with an instant live preview, a drag-and-drop colour stop editor, syntax-highlighted CSS output, and a curated library of over 130 presets. Pick a type, drag the angle, stack as many stops as you like, and copy production-ready CSS in HEX, RGB or HSL. Everything runs locally in your browser: nothing is uploaded, and no sign-up is required.
Live preview
linear · 135°linear-gradient(135deg, …)
Gradient bar
3 stopsCSS output
readyWhat is a CSS Gradient Generator?
A tool that turns a few colour choices into a ready-to-paste CSS gradient.
A CSS gradient generator lets you design a gradient visually and hands you the
exact CSS to reproduce it. Behind the scenes a gradient is just a function —
linear-gradient(), radial-gradient() or conic-gradient() —
assigned to background or background-image. Writing that function by
hand means juggling angles, colour stops and percentage positions in your head. A generator
gives you an immediate preview so you can see the result while you adjust it.
This generator supports the three modern gradient types plus their repeating variants, unlimited colour stops, and output in HEX, RGB or HSL. Drag handles directly on the gradient bar to reposition stops, click anywhere on the bar to insert a new one, or load one of the 130+ curated presets. The Statistics tab shows you the numbers behind the gradient — stop count, CSS size, relative luminance and WCAG contrast ratio.
Inar CSS Gradient Generator runs entirely inside your browser. Nothing is uploaded, there is no server call and no third-party processing — your colour choices stay on your device.
Linear, Radial & Conic
Three functions, three very different looks. Pick whichever matches the design.
Linear
Colour travels in a straight line at a fixed angle. The classic choice for buttons, headers and hero sections. 0deg runs bottom-to-top, 90deg runs left-to-right.
Radial
Colour radiates outward from a centre point. Use a circle or an ellipse, and move the centre anywhere with keywords like top left or bottom right.
Conic
Colour sweeps around a centre point like a clock face. Perfect for pie charts, colour wheels, sunbursts and progress rings — especially with hard colour stops.
Features
Everything you need to design a gradient without leaving the browser.
Draggable stop editor
Move stops directly on the gradient bar. Click anywhere on the bar to insert a new stop at that exact position.
Live preview
The gradient updates the instant you move a slider, pick a colour or load a preset.
Unlimited stops
Add, duplicate, remove and re-position as many colour stops as you need, with a colour picker and hex field.
Full geometry
Interactive angle dial, circle or ellipse, nine centre positions and repeating variants.
HEX, RGB or HSL
Write colours in whichever notation matches the rest of your stylesheet.
Highlighted CSS
The output panel colours selectors, properties, functions, numbers and hex values.
Smart randomiser
Generates harmonious palettes using analogous, complementary and triadic hue schemes.
130+ presets
Curated gradients across 16 categories — warm, cool, nature, neon, pastel, cosmic, retro, food and more.
Live statistics
Stop count, CSS size, stop distribution, relative luminance and WCAG contrast ratio.
Copy & download
Copy the CSS or just the gradient value to your clipboard, or download it as a .css file.
Session persistence
Your gradient and output preferences are saved to local storage between visits.
Privacy first
100% client-side. No uploads, no tracking, no account.
How to Use the Generator
Five steps from a blank canvas to copy-ready CSS.
Choose a gradient type
Pick Linear, Radial or Conic in the Options tab. The geometry controls change to match the function you selected.
Set the angle and centre
Drag the interactive angle dial or use one of the eight quick-angle buttons. For radial and conic gradients, choose a shape and a centre position.
Build your colour stops
Drag the round handles on the gradient bar to move stops, or click anywhere on the bar to insert a new one. Use the colour picker and hex field for fine control, and press Distribute to space them evenly.
Pick an output format
Switch between HEX, RGB and HSL, choose
backgroundorbackground-image, and set the selector you want the rule written against.Copy or download
Hit Copy CSS to place the rule on your clipboard, or Download to save it as
gradient.css.
Gradient Tips
Small details that separate a good gradient from a muddy one.
Mind the middle
Two very different hues can produce a dull grey midpoint. Add a third stop in between to steer the transition — that is exactly what the randomiser does.
Hard stops for shapes
Place two stops at the same position — for example 50% and 50% — to create a hard edge. This is how conic gradients become pie charts.
Check the contrast
Text over a gradient needs to stay readable everywhere. Open the Statistics tab to see the contrast ratio between your lightest and darkest stop.
Frequently Asked Questions
Answers to the most common questions about CSS gradients.
What is a CSS gradient generator?
It is a visual tool for designing CSS gradients. You choose a gradient type, colours and positions, see a live preview, and copy the generated linear-gradient(), radial-gradient() or conic-gradient() CSS.
Are CSS gradients images?
No. A CSS gradient is generated by the browser at render time and behaves like an image for the purposes of the background-image property — but there is no file to download, no network request, and it scales perfectly to any size.
Is my data uploaded anywhere?
No. Inar CSS Gradient Generator runs entirely in your browser. Your colours and settings are processed locally and never leave your device.
Can I use more than two colours?
Yes. Add as many colour stops as you like with the Add stop button or by clicking the gradient bar. Each stop has its own colour and position between 0% and 100%.
What does the angle mean in a linear gradient?
The angle sets the direction the gradient runs in. 0deg points to the top, 90deg points to the right, 180deg points to the bottom and 270deg points to the left.
What is a conic gradient used for?
Conic gradients sweep colour around a centre point, like a clock face. They are ideal for pie charts, colour wheels, sunburst effects and progress rings — particularly when you place two stops at the same position to create hard edges.
Which browsers support conic gradients?
Conic gradients are supported in all current versions of Chrome, Edge, Firefox, Safari and Opera. For very old browsers, keep the fallback background colour enabled so the element still has a solid fill.
Should I use background or background-image?
Both work. background is the shorthand and is more compact; background-image is more explicit and avoids accidentally resetting other background properties. Use the Output options to switch between them.
Can I animate a CSS gradient?
Gradients themselves are not interpolated by CSS transitions in most browsers. A common workaround is to apply the gradient to an oversized pseudo-element and animate its transform or background-position instead.
Is the CSS Gradient Generator free?
Yes. Inar CSS Gradient Generator is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn