CSS Gradient Generator: Linear, Radial, Conic
Build linear, radial and conic gradients with multiple colour stops and copy the CSS or Tailwind class
background-color: #ff7e5f; /* fallback */ background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]
Linear, radial and conic gradients explained
A CSS gradient is an image the browser draws for you, so it goes anywhere an image can: background, background-image, border-image or mask-image. There are three functions, and this generator switches between them with one control.
linear-gradient() blends colours along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. Use it as a linear gradient generator for buttons, hero sections and subtle card backgrounds, where a two-stop blend a few degrees off horizontal often looks more natural than a flat colour.
radial-gradient() spreads colours outward from a centre point. Choose circle for an even ring or ellipse to stretch the shape to the element's aspect ratio, then move the centre with the X and Y sliders. Radial gradient CSS is the usual way to fake a spotlight, a vignette or a soft glow behind a product image without exporting a PNG.
conic-gradient() sweeps colours around a centre point, like the hand of a clock. The start angle (from) rotates the whole sweep. A conic gradient is how pie charts, colour wheels and loading rings are drawn in pure CSS; give two neighbouring stops the same position and you get a hard edge instead of a blend.
Tick Repeating to switch to repeating-linear-gradient() and friends, which tile the stop pattern across the element. Short stop distances, such as 0%, 5% and 10%, produce stripes and are a common way to build warning tape or progress-bar textures.
Colour stops, transparency and output
Each colour stop has a colour, a position from 0 to 100 percent and an alpha value. Add up to ten stops; new ones are inserted in the widest gap so the preview changes gradually. Stops are sorted by position in the output regardless of the order you added them, which matches how browsers interpret them anyway.
Alpha below 1 is written as rgba(), and the preview sits on a checkerboard so you can see exactly what will show through. A gradient that fades to transparent is the standard way to put readable text over a photo: layer it above the image and darken only the bottom third.
The CSS output gives two declarations. background-color is set to the first stop as a fallback, because a gradient is an image and an image that fails to apply leaves no colour behind. The second line is the gradient background CSS itself. Copy both into your rule.
If your project uses Tailwind CSS, copy the Tailwind arbitrary value instead. It wraps the same gradient in bg-[...] with spaces replaced by underscores, which is how Tailwind's arbitrary-value syntax expects whitespace to be written. It works in Tailwind v3 and v4 and does not depend on the built-in from-, via- and to- colour utilities, so you keep exact stop positions, radial shapes and conic sweeps that those utilities cannot express.
All drawing happens in your browser with plain CSS; nothing is uploaded and no account is needed. The presets are starting points: pick one, then adjust the angle and stops until it matches your design.
How to use the CSS Gradient Generator: Linear, Radial, Conic tool
- 1
Pick a gradient type
Choose Linear, Radial or Conic, or start from a preset such as Sunset, Spotlight or Color wheel.
- 2
Set direction or centre
Drag the angle slider for linear and conic gradients, or move the centre X and Y for radial and conic ones.
- 3
Edit the colour stops
Change each stop colour, position and alpha, add stops for richer blends and remove ones you do not need.
- 4
Copy the code
Copy the background CSS with its fallback colour, or the Tailwind bg-[] arbitrary value.
Frequently asked questions
How do I make a gradient background in CSS?
Set the background property to a gradient function, for example background: linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%);. This tool writes that line for you and adds a solid background-color fallback.
What is the difference between radial and conic gradients?
A radial gradient changes colour as you move outward from the centre, producing rings. A conic gradient changes colour as you move around the centre, producing wedges like a pie chart or colour wheel.
How do I create hard colour stripes instead of a smooth blend?
Give two adjacent stops the same position, for example yellow 0%, yellow 5%, black 5%, black 10%, and tick Repeating. The Stripes preset shows this pattern.
Can I use the gradient with Tailwind CSS?
Yes. Copy the Tailwind arbitrary value, a bg-[...] class containing the full gradient with underscores in place of spaces. It works in Tailwind v3 and v4.
Are conic gradients supported in all browsers?
conic-gradient() is supported in current versions of Chrome, Edge, Firefox and Safari. Very old browsers ignore it and fall back to the background-color line in the generated CSS.
Related on TechLogHub
Related CSS Tools
CSS Minifier with Before and After Byte Counts
Minify CSS by removing whitespace and comments
Box Shadow Generator with Layers and Tailwind
Stack multiple box-shadow layers with live preview and copy the CSS or a Tailwind shadow-[] class
Border Radius Generator with Blob Shapes
Round each corner or shape organic blobs with 8-value border-radius and copy CSS or Tailwind
Flexbox Generator with Tailwind Classes
Build flex layouts visually, tune container and item properties, and copy CSS or Tailwind classes
CSS Grid Generator with Template Areas
Define grid tracks, paint named grid-template-areas and copy the CSS and HTML skeleton
CSS Clamp Calculator for Fluid Typography
Calculate fluid clamp() values from min and max sizes and viewports, with a fluid type scale mode
Get the next tool before you need it
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.