CSS Gradient Generator — Linear, Radial & Conic, With Live Preview
Build linear, radial and conic gradients with draggable colour stops, an angle dial and presets. Copy the CSS or a Tailwind class.
background: #54a5d8; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 55%, #a7f3d0 100%);
bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%,#a7f3d0_100%)]
The first line is a solid fallback (the average of your stops) for email clients and very old browsers that ignore gradients.
Runs entirely in your browser. Nothing you enter is sent to us or stored. Browse all free tools.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free CSS gradient generator builds linear, radial and conic gradients visually and gives you the CSS to paste. Drag colour stops along the bar, click the bar to add more, set each stop's opacity, turn the angle dial, and the preview updates as you go. The output includes a solid fallback colour and a Tailwind arbitrary-value class, so it works in plain CSS, a component library or a utility-first codebase.
Gradients are plain CSS images, so they cost no network request, scale to any size without blurring and can be layered over photos or other gradients. They also hide some traps: a gradient through two saturated complementary colours passes through a muddy grey in the middle, and text on a gradient has to pass contrast at its lightest point. The notes below cover the syntax, those pitfalls, and how repeating gradients make stripes.
How to use
- Choose Linear, Radial or Conic, and tick Repeating if you want the pattern to tile.
- Click a stop on the bar to select it, then change its colour, position and opacity below. Click empty space on the bar to add a stop; press Delete to remove the selected one.
- Set the direction with the angle dial (drag it, or use the arrow keys) or the quick-angle buttons. For radial and conic, set the centre point.
- Or start from a preset and adjust it.
- Copy the CSS (with its fallback line) or the Tailwind class.
Frequently asked questions
How do I make a gradient in CSS?
Use a gradient function as a background image: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); The first argument is the direction (an angle, or keywords like to right), followed by colour stops, each a colour with an optional position. radial-gradient() spreads out from a point and conic-gradient() sweeps around one. Gradients are images, so they go in background or background-image, not background-color.
What does the angle in linear-gradient mean?
It is the direction the gradient travels towards, measured clockwise from the top: 0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom (the default if you omit it), and 270deg from right to left. That is different from the maths convention where 0 degrees points right, which is why gradients from some design tools come out rotated.
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line. A radial gradient changes colour outward from a centre point, as a circle or an ellipse, and its size keyword (closest-side, farthest-corner and so on) controls where the last stop lands. A conic gradient changes colour around a centre point, like the hands of a clock, which makes it the tool for pie charts, colour wheels and spinners.
How do I make stripes with CSS gradients?
Put two stops at the same position to get a hard edge instead of a blend, then repeat the pattern. For example repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) makes diagonal stripes 10px wide. The Stripes preset here does the same with percentages. In a repeating gradient, the distance between the first and last stop is the length of one repeat.
How do I use a gradient in Tailwind CSS?
For simple two- or three-colour linear gradients use Tailwind's utilities, such as bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r in Tailwind v4). For anything else, angles, radial or conic gradients, opacity stops, use an arbitrary value: the class generated here, like bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], where underscores stand in for spaces. Very long arbitrary values are hard to read, so consider moving them into your theme config.
Why does my gradient look muddy or grey in the middle?
Browsers interpolate gradients in sRGB by default, and the straight line between two saturated, near-opposite colours (blue to yellow, red to green) passes through desaturated grey. Add a middle stop with a clean intermediate colour, or, in current browsers, interpolate in a perceptual space: linear-gradient(90deg in oklch, blue, yellow). Banding in long, subtle gradients is a different problem, caused by 8-bit colour; a little noise texture over the gradient hides it.
Gradient syntax reference
• linear-gradient(angle, stop, stop, ...): angle in deg or turn, or a keyword such as to right or to bottom left. Default 180deg (top to bottom).
• radial-gradient(shape size at x y, stops): shape is circle or ellipse (default ellipse); size is closest-side, closest-corner, farthest-side or farthest-corner (default), or explicit lengths; position defaults to center.
• conic-gradient(from angle at x y, stops): stops are positioned in degrees or percentages around the circle. Repeat the first colour as the last stop for a seamless wheel.
• repeating-*-gradient(): same syntax; the stops repeat for as long as the element is large.
• Stops: a colour followed by zero, one or two positions. Two positions (red 20% 40%) create a solid band. A position on its own between two stops (red, 30%, blue) moves the midpoint of the blend.
• Transparency: rgba() or 8-digit hex stops. Fade to transparent in the same colour, rgba(0,0,0,0) not the keyword transparent, which in old browsers meant transparent black and greyed out light gradients.
Gradients behind text: keeping it readable
Contrast against a gradient is only as good as its worst point. Check your text colour against the lightest stop (for dark text) or the darkest stop (for light text) in the contrast checker, not against the average.
For text over a photo, a dark overlay gradient is the standard fix: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%) layered over the image (the Fade to clear preset) darkens only the bottom, where captions usually sit. Layer it first in the background list: background: linear-gradient(...), url(photo.jpg).
The solid fallback in the generated CSS matters for HTML email, where many clients, Outlook on Windows above all, ignore gradients entirely. Without it, white text can end up on a white background.
Related free tools
- Box Shadow Generator — Design layered box-shadow and text-shadow effects with live preview, presets for elevation, neumorphism and glow, and copy the CSS.
- Color Palette Generator — Press the spacebar for a new palette, lock the colours you like, pick a harmony, or pull the palette out of a photo. Export to CSS, Tailwind, SCSS, JSON or PNG.
- Contrast Checker — Check text and background colours against WCAG 2.x AA and AAA, see the APCA Lc value, and get the nearest colour that passes.
- Color Picker & Converter — Pick any color from anywhere on your screen, or convert instantly between HEX, RGB, and HSL.