Design a CSS gradient and copy the code
This CSS gradient generator builds <code>linear-gradient()</code>, <code>radial-gradient()</code> and <code>conic-gradient()</code> backgrounds visually. Click the stop bar to add colors, drag them into place, set each stop's opacity, then adjust the angle, shape or center while the preview updates live. Copy the CSS with a solid fallback color, copy a ready-made Tailwind class, or export the gradient as a PNG at any size. Paste a gradient from your stylesheet to edit it here. Everything runs locally in your browser.
How to make a CSS gradient
- 1Choose Linear, Radial or Conic, or start from one of the presets.
- 2Click anywhere on the stop bar to add a color stop, drag stops to move them, and press Delete on a focused stop to remove it. Arrow keys move the focused stop by 1%, Shift+arrow by 10%.
- 3Pick each stop's color and opacity. Any CSS color works: hex,
rgb(),hsl(),oklch()or a color name. - 4Set the angle with the dial (hold Shift to snap to 15°), or for radial and conic gradients drag on the preview to move the center.
- 5Copy the CSS or the Tailwind class, or set a width and height and download a PNG.
Linear, radial and conic gradients
- linear-gradient()
- Colors change along a straight line at an angle. <code>0deg</code> points up, <code>90deg</code> to the right; the keywords <code>to right</code> and <code>to bottom left</code> mean the same thing in words. The gradient line is just long enough for the corners to receive the first and last colors.
- radial-gradient()
- Colors spread outward from a center as a circle or an ellipse. The size keyword decides where 100% lands: <code>farthest-corner</code> (the default) reaches the farthest corner of the box, <code>closest-side</code> stops at the nearest edge.
- conic-gradient()
- Colors sweep around a center like the hands of a clock, starting at the <code>from</code> angle. Hard stops make pie charts and color wheels without any images.
Color stops, hard edges and transparency
Each color stop is a color and a position. Between two stops the browser blends smoothly; when two stops share a position, the color changes abruptly, which is how stripes, flags and pie charts are drawn. Give the same color two neighbouring stops to hold it as a solid band.
Stops can be partly transparent, so a gradient can fade an image into the page or darken the bottom of a hero picture so white text stays readable. Modern browsers blend transparent stops in premultiplied color, so fading to transparent no longer turns grey in the middle, but the generator still writes the explicit rgba() color for clarity.
Repeating gradients
repeating-linear-gradient() and its radial and conic counterparts tile the pattern between the first and last stop over the whole box. Turn on Repeating and move the last stop well before 100%, to 10% for example, to get stripes, rings or sunbursts. If the last stop is at 100%, a repeating gradient looks exactly like a normal one.
Fallback color, Tailwind and PNG export
Gradients are images, so a browser that cannot draw one shows nothing behind your text. The optional fallback line sets a solid background first, using the average of your stops, and the gradient line after it overrides it wherever gradients work.
The Tailwind output is an arbitrary-value class such as bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Spaces become underscores because Tailwind class names cannot contain spaces; it works in Tailwind 3 and 4 without any config.
PNG export paints the same gradient on a canvas at the size you choose, up to 8192 pixels on each side, for wallpapers, social images or design tools that cannot read CSS. Pick colors that suit your text with the contrast checker, convert them between notations with the color converter, or add depth with the box shadow generator.
Editing an existing gradient
Paste a gradient into Import: a bare linear-gradient(…), a whole background: or background-image: declaration, a vendor-prefixed -webkit- version or a Tailwind bg-[…] class. Directions such as to top right, angles in deg, turn or rad, stops with two positions and stops without positions are all read. Pixel positions and color hints cannot be shown on a percentage bar, so they are approximated and the import tells you so.
Frequently asked questions
- How do I make a gradient background in CSS?
- Set background (or background-image) to a gradient function, for example background: linear-gradient(90deg, #ff7e5f, #feb47b);. This generator writes that line for you, with an optional solid fallback color before it.
- What is the difference between linear, radial and conic gradients?
- A linear gradient changes color along a straight line, a radial gradient spreads outward from a center in circles or ellipses, and a conic gradient sweeps around a center like a clock hand.
- How do I make a hard edge or stripes?
- Put two stops at the same position with different colors. For repeating stripes, turn on Repeating and place the last stop at a small value such as 10%.
- Can a CSS gradient be transparent?
- Yes. Lower a stop's opacity and the generator writes it as rgba(). A gradient from a color to transparent is a common way to fade an image or overlay into the page.
- How do I use a gradient in Tailwind CSS?
- Copy the Tailwind class, an arbitrary value such as bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], and add it to your element. Tailwind's own from-/via-/to- utilities only cover simple linear gradients; the arbitrary value supports any gradient.
- Do conic gradients work in all browsers?
- conic-gradient() works in all current versions of Chrome, Edge, Firefox and Safari. Add the fallback color if you still support very old browsers.
- Can I download the gradient as an image?
- Yes. Enter a width and height and download a PNG. The image is drawn in your browser at exactly that size, up to 8192 × 8192 pixels.
- Is anything uploaded?
- No. The preview, the CSS and the PNG export are all produced in your browser.