How do I make a CSS gradient with transparency?

Give a stop an alpha with the alpha slider, or type rgba(), hsla() or #rrggbbaa in its color box. The stop is written as 8-digit hex: #ff0000 at 50% becomes #ff000080. At 100% alpha it stays a plain #rrggbb.

How do I write a CSS gradient in Tailwind?

Choose Tailwind. The default gradient gives bg-[linear-gradient(to_right,_#ff0000_0%,_#0000ff_100%)], with an underscore for every space. The angles 0, 90, 180 and 270 are written as to top, to right, to bottom and to left, and any other angle stays in degrees, such as 135deg. A corner keyword such as to bottom right is written only when you tap that direction, because the angle it gives depends on the shape of the box (MDN); a custom 135° stays 135deg.

Which angle points which way in a linear gradient?

0deg points up, 90deg right, 180deg down and 270deg left, and the angle grows clockwise. A gradient with no direction runs to the bottom, which is 180deg (MDN).

How does a conic gradient work?

Colors sweep clockwise around a center point, starting at the top. The start angle turns that starting point and the position moves the center, and stop positions are angles, or percentages where 100% is 360deg (MDN). The tool takes a start angle from 0 to 360 and one of nine positions, and writes conic-gradient(from 0deg at center, #ff0000 0%, #0000ff 100%) for the default stops.

Why does my typed color not change the gradient?

The box reads #rgb, #rrggbb, #rrggbbaa, rgba(r, g, b, a) and hsla(h, s%, l%, a) only. Names such as red, an rgba channel above 255, a hue above 360, saturation or lightness above 100% and an alpha above 1 are refused. The stop keeps its last valid color and the field says which forms it reads.

How do I turn an image into a CSS gradient?

Choose an image under Colors from an image. The browser shrinks it to 10 × 10 pixels on a white background and reads the four corners and the center. The first three different colors become the stops, at 0, 50 and 100% (two stops at 0 and 100% if there are only two, and white is added to a one-color image), in a linear gradient to the right. The file is read in this browser and is not uploaded. Then edit the stops like any others.

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code. How it works

Direction

Angle90°

Color Stops

Alpha100%

100%

Alpha100%

Colors from an imageChoose an image to uploadExtract gradient colors from any image

Presets:

About the CSS Gradient Generator

linear-gradient(90deg, #ff0000 0%, #0000ff 100%) is the gradient this CSS gradient generator opens with: red to blue, left to right. Switch to radial or conic, pick one of eight direction keywords or a custom angle, add stops that each carry their own alpha and position, or take the colors from an image, and copy the result as CSS, Tailwind, a CSS variable, a React style or SCSS.

What a stop’s color box reads

Typed	Stored color	Alpha
#f00	#ff0000	100%
#ff000080	#ff0000	50%
rgba(255, 0, 0, 0.5)	#ff0000	50%
hsla(120, 100%, 50%, 1)	#00ff00	100%
hsla(240, 100%, 50%, 0.25)	#0000ff	25%
rgba(300, 0, 0, 1)	Refused	The stop keeps its last valid color
hsla(361, 50%, 50%, 1)	Refused	The stop keeps its last valid color
red	Refused	The stop keeps its last valid color

Color names are not read, and a value out of range is refused, not clamped. The text you type stays in the box while you type.

How to use this tool

Pick linear, radial or conic, or start from one of ten presets, from Sunset to Pastel, or from an image under Colors from an image.
For linear, tap a direction (right, left, top, bottom or one of the four corners) or Custom ° for an angle from 0 to 360. For radial set the shape, size and position, and for conic the start angle and position.
Edit the stops: use the color swatch or type a color, then the position and alpha sliders. Click the bar to add a stop (a click within 10% of an existing stop adds none), drag a handle or use the position slider to move it, or double-click a stop to remove it. Two stops always remain.
Choose CSS, Tailwind, CSS Variable, React or SCSS and copy. Use Save to keep the gradient in your list.

Frequently asked questions

How do I make a CSS gradient with transparency?: Give a stop an alpha with the alpha slider, or type rgba(), hsla() or #rrggbbaa in its color box. The stop is written as 8-digit hex: #ff0000 at 50% becomes #ff000080. At 100% alpha it stays a plain #rrggbb.
How do I write a CSS gradient in Tailwind?: Choose Tailwind. The default gradient gives bg-[linear-gradient(to_right,_#ff0000_0%,_#0000ff_100%)], with an underscore for every space. The angles 0, 90, 180 and 270 are written as to top, to right, to bottom and to left, and any other angle stays in degrees, such as 135deg. A corner keyword such as to bottom right is written only when you tap that direction, because the angle it gives depends on the shape of the box (MDN); a custom 135° stays 135deg.
Which angle points which way in a linear gradient?: 0deg points up, 90deg right, 180deg down and 270deg left, and the angle grows clockwise. A gradient with no direction runs to the bottom, which is 180deg (MDN).
How does a conic gradient work?: Colors sweep clockwise around a center point, starting at the top. The start angle turns that starting point and the position moves the center, and stop positions are angles, or percentages where 100% is 360deg (MDN). The tool takes a start angle from 0 to 360 and one of nine positions, and writes conic-gradient(from 0deg at center, #ff0000 0%, #0000ff 100%) for the default stops.
Why does my typed color not change the gradient?: The box reads #rgb, #rrggbb, #rrggbbaa, rgba(r, g, b, a) and hsla(h, s%, l%, a) only. Names such as red, an rgba channel above 255, a hue above 360, saturation or lightness above 100% and an alpha above 1 are refused. The stop keeps its last valid color and the field says which forms it reads.
How do I turn an image into a CSS gradient?: Choose an image under Colors from an image. The browser shrinks it to 10 × 10 pixels on a white background and reads the four corners and the center. The first three different colors become the stops, at 0, 50 and 100% (two stops at 0 and 100% if there are only two, and white is added to a one-color image), in a linear gradient to the right. The file is read in this browser and is not uploaded. Then edit the stops like any others.

When to use this gradient generator

A hero background, a button fill or a photo overlay that fades to transparent is one line of CSS and no image to download. This generator is the one for gradients that need see-through stops or exact positions:

every stop has its own alpha slider as well as a position slider;
handles can be dragged along the bar, a click adds a stop and a double-click removes one (two always remain);
linear takes one of eight direction keywords (to right, to top left and so on) or a custom angle;
radial takes circle or ellipse, four size keywords and nine positions, and conic takes a start angle;
an image you choose gives the starting colors: the four corners and the center of a 10 × 10 copy, read in this browser;
up to 12 gradients you save stay in this browser with the one on screen, and Clear Saved Values removes them.

Start from Sunset, Ocean, Midnight, Mesh, Mint, Sunrise, Deep Ocean, Dusk, Neon or Pastel, then copy CSS, Tailwind, a CSS variable, a React style or SCSS.

How the gradient is written

background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

That is the first render. Radial writes the shape, the size keyword and the position, as in radial-gradient(circle farthest-corner at center, #ff0000 0%, #0000ff 100%), and conic writes from the start angle at the position. A stop below 100% alpha is written as 8-digit hex, so #ff0000 at 50% is #ff000080; a stop at full alpha stays 6-digit.

The other formats carry the same value: CSS Variable writes --gradient: ...;, React writes a style={{ background: ... }} prop with the value in double quotes, and SCSS writes a $gradient variable used in an .element rule. The Tailwind format wraps the value in an arbitrary bg-[...] class with an underscore for each space: bg-[linear-gradient(to_right,_#ff0000_0%,_#0000ff_100%)].

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.

CSS

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.