Quick Answer
Pick Linear, Radial or Conic, set the angle or centre, then choose colours and positions for each stop (up to 8). The preview updates instantly and the box below shows ready CSS such as background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%); — copy it, or download the gradient as a 1920×1080 PNG wallpaper.
What is a CSS Gradient Generator?
A CSS Gradient Generator (CSS ग्रेडिएंट जनरेटर) lets you design colour gradients visually and get the matching CSS code. Gradients — smooth blends from one colour to another — are everywhere in modern design: hero sections, buttons, cards, app backgrounds and YouTube thumbnails. Writing linear-gradient() by hand and refreshing the page to see the result is slow; with a generator you drag sliders, watch a live preview and copy finished code.
This free tool supports all three CSS gradient types — linear, radial and conic — with 2 to 8 colour stops, adjustable angle, shape and centre, nine ready presets, random and reverse buttons, CSS output with a solid-colour fallback, and a 1920×1080 PNG download for when you need the gradient as an image. Everything runs in your browser.
Key Features
- Three gradient types — linear, radial and conic.
- Angle control from 0° to 360° for linear and conic gradients.
- Shape and centre for radial (circle or ellipse) and centre for conic.
- Up to 8 colour stops, each with a colour picker, HEX field and position slider.
- Nine presets including Ocean, Sunset, Mint and a saffron-white-green Saffron preset.
- Random and Reverse for quick exploration.
- CSS with fallback — ready to paste.
- PNG export at 1920×1080 for wallpapers, thumbnails and slides.
How to Create a Gradient — Step by Step
- Choose the type: Linear, Radial or Conic.
- Set the direction: drag the angle slider, or pick the shape and centre.
- Edit the colour stops: click a colour box or type a HEX code, then drag the slider to set its position.
- Add or remove stops with “Add stop” and the × button (minimum 2, maximum 8).
- Try presets, Random or Reverse for ideas.
- Copy CSS or Download PNG.
CSS Gradient Syntax Explained
| Type | Example | Result |
|---|---|---|
| Linear | linear-gradient(90deg, #1B98E0 0%, #7B2FF7 100%) | Blue on the left to purple on the right |
| Radial | radial-gradient(circle at center, #FFFFFF 0%, #1B98E0 100%) | White centre glowing out to blue |
| Conic | conic-gradient(from 0deg at center, red 0%, yellow 50%, red 100%) | Colours sweeping round the centre |
| Hard edge | linear-gradient(90deg, #FF9933 50%, #138808 50%) | Two solid halves, no blend |
In a linear gradient the angle follows the CSS convention: 0deg points up, 90deg right, 180deg down and 270deg left, turning clockwise. Keywords also work — to right equals 90deg and to bottom right points at the corner. For radial gradients, circle keeps a round shape while ellipse (the default in CSS) stretches to the element's proportions. Conic gradients start at the angle given after from and sweep clockwise around the centre.
Understanding Colour Stops
Each stop has a colour and a position from 0% to 100% along the gradient. The browser blends smoothly between neighbouring stops. Some useful patterns:
- Even blend — stops at 0% and 100% for a simple two-colour fade.
- Bias — move the second stop to 30% so the second colour dominates.
- Hard edge — two stops at the same position make a sharp line, useful for stripes and split backgrounds.
- Three-colour flag — the Saffron preset uses #FF9933 0%, #FFFFFF 50%, #138808 100%.
Stops are sorted by position when the CSS is written, so you can add them in any order. The Reverse button mirrors every position (a stop at 20% moves to 80%), flipping the gradient without retyping colours.
Practical Uses
- Hero sections and landing pages — a subtle diagonal gradient adds depth without an image.
- Buttons — a gentle two-tone gradient looks modern; darken it slightly on hover.
- Cards and overlays — a transparent-to-dark gradient over a photo makes white text readable.
- Gradient text — apply the gradient as a background and clip it to the text.
- Pie charts and progress rings — conic gradients with hard edges draw them in pure CSS.
- Thumbnails and wallpapers — download the PNG at 1920×1080 and add text in any editor.
Ready-to-Use Snippets
Gradient text: background: linear-gradient(90deg, #1B98E0, #7B2FF7); -webkit-background-clip: text; background-clip: text; color: transparent;
Photo overlay: background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%), url(photo.jpg) center / cover; — the gradient is listed first so it sits on top of the image.
Simple pie chart: background: conic-gradient(#1B98E0 0% 40%, #FF9933 40% 75%, #138808 75% 100%); border-radius: 50%; — slices of 40%, 35% and 25%.
Worked Example: A Thumbnail Background
Suppose you need a bold background for a YouTube thumbnail about technology. Choose Linear, click the Ocean preset (#1B98E0 to #7B2FF7) and set the angle to 135° so the colour runs from the top-left corner to the bottom-right. The CSS box now reads background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%);. Want a soft spotlight behind the presenter instead? Switch to Radial, choose Circle and centre it on the Right, then add a third stop of #FFFFFF at 0% so the glow starts bright. When it looks right, click Download PNG to get a 1920×1080 image, which keeps the 16:9 shape of a thumbnail; open it in your editor and add text and a photo on top. Because the image is generated from colour maths rather than a photo, it stays crisp even when compressed.
Which Gradient Type Should You Choose?
Linear is the safe default for backgrounds, buttons and headers — it is easy to read and works at any size. Radial creates focus: a lighter centre draws the eye to whatever sits on top, which suits profile cards, spotlights and vignette effects. Conic is the specialist — perfect for colour wheels, pie charts, loading spinners and starburst patterns, but it can look busy as a full-page background. If you are unsure, start with linear at 135°, then experiment.
About the PNG Export
The PNG is drawn with the browser's canvas gradient functions at 1920×1080 pixels. For linear gradients the tool reproduces the CSS angle convention and gradient-line length, so the image matches what you see in the preview. For radial gradients the PNG uses a circle reaching the farthest corner, the CSS default size; if you chose an ellipse, the PNG is still drawn as a circle, so the shape can differ slightly. Conic export needs a browser with canvas conic support — current Chrome, Edge, Firefox and Safari have it.
Design and Accessibility Tips
- Check contrast at both ends. Text must be readable over the lightest and darkest parts of the gradient. Our Color Palette Generator shows contrast ratios.
- Keep it subtle for large areas. Neighbouring hues (blue to purple) look calmer than opposites (red to green), which can produce a muddy middle.
- Avoid grey middles. If a two-colour blend looks dull in the centre, add a brighter middle stop.
- Use brand colours. Gradients between two shades of your brand colour keep designs consistent.
- Respect dark mode. Bright gradients can glare on dark themes; consider a deeper variant.
Who Uses a Gradient Generator?
- Front-end developers styling websites and apps.
- UI/UX designers prototyping backgrounds and buttons.
- YouTubers and Instagram creators making thumbnails and story backgrounds.
- Bloggers adding colourful headers without heavy images.
- Students learning CSS.
- Presenters wanting clean slide backgrounds.
Common Mistakes to Avoid
- Using background-color — gradients are images, so use
backgroundorbackground-image. - Too many colours — more than three or four stops can look busy.
- Forgetting element height — a gradient on an empty element with no height is invisible.
- Repeating on long pages — on the body, add
min-height: 100vhorbackground-attachment: fixedso the gradient covers the whole screen instead of repeating in strips when the content is short.
Troubleshooting
- HEX field ignored — enter a full six-digit code with # (for example #1B98E0).
- Can't remove a stop — a gradient needs at least two stops.
- Banding in large gradients — subtle stripes can appear with very similar colours on some screens; widen the colour difference slightly.
Quick Glossary
- Gradient: a smooth transition between colours.
- Colour stop: a colour and its position in a gradient.
- Linear: blends along a straight line.
- Radial: blends outward from a centre.
- Conic: blends around a centre point.
- Fallback: a solid colour used if the gradient is not applied.
Why Use This CSS Gradient Generator?
It covers every CSS gradient type with precise controls, live preview, clean code and an image export — free, fast and private.
CSS Gradient Generator — Key Facts
| Types | linear-gradient, radial-gradient, conic-gradient |
|---|---|
| Colour stops | 2 to 8, each with a 0–100% position |
| Angle | 0° points up, 90° right, 180° down (CSS convention) |
| Output | CSS with a solid-colour fallback line |
| Image export | PNG at 1920×1080 |
| Browser support | All modern browsers support all three types |
Frequently Asked Questions
How do I make a gradient background in CSS?
Use the background property with a gradient function, for example background: linear-gradient(135deg, #1B98E0, #7B2FF7);. This tool builds the exact code for you with a live preview, so you only need to copy and paste it.
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at an angle. A radial gradient spreads outward from a centre point in a circle or ellipse. A conic gradient sweeps colours around a centre point like the hands of a clock, which is useful for pie charts and colour wheels.
Which direction is 0deg in a CSS linear gradient?
0deg points to the top, 90deg to the right, 180deg to the bottom and 270deg to the left. So linear-gradient(90deg, red, blue) starts red on the left and ends blue on the right.
What are colour stops?
Colour stops are the colours in the gradient and where each one sits along it, written as a percentage. #FF9933 0%, #FFFFFF 50%, #138808 100% puts white exactly in the middle.
How do I make a hard line instead of a smooth blend?
Give two neighbouring stops the same position. For example, red 50% followed by blue 50% creates a sharp edge between red and blue with no blending.
Why does the CSS include a fallback line?
The first line sets a solid background colour. Every modern browser supports gradients, but the fallback keeps text readable if a gradient fails to load or is overridden. It is harmless to keep.
Can I use the gradient as a wallpaper or thumbnail background?
Yes. Click Download PNG to save a 1920×1080 image of the gradient, which suits desktop wallpapers, YouTube thumbnails and presentation slides.
Do I need -webkit- prefixes?
No. Unprefixed linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
How do I put a gradient on text?
Apply the gradient as the background of the text element, then add background-clip: text and color: transparent (keep -webkit-background-clip: text for wider support).
How many colour stops can I add?
This tool supports 2 to 8 stops. Two or three usually look best; more stops are useful for rainbow and multi-colour effects.
Will gradients slow down my website?
No. CSS gradients are drawn by the browser and need no image download, so they are usually lighter than a background image.
Is the CSS Gradient Generator free?
Yes. It is free, unlimited, needs no sign-up and runs entirely in your browser.
Beautiful Backgrounds in Seconds!
Linear, radial and conic gradients — copy clean CSS for free.
Explore More Prompt Minds Tools
CSS Gradient Generator works great alongside our other free tools. Every Prompt Minds tool runs entirely in your browser — no sign-up, no uploads, no watermarks. Browse all free tools.