Free · Fast · Privacy-first

Transparent Gradient CSS

Fading a gradient to transparent sounds simple, but using the CSS "transparent" keyword produces an unwanted grey band at the transition zone.

⚡

Generates rgba-based transparent stops to prevent grey banding

🔒

Choose fade direction: horizontal, vertical, or diagonal

✨

Use for overlays, masks, and edge-fade effects

⚡

Output is a single background declaration ready to apply

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Gradient to your website

Drop the Gradient into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Why "transparent" Causes Banding and How rgba(color, 0) Fixes It

The CSS keyword "transparent" is formally defined in the specification as rgba(0, 0, 0, 0), which is fully transparent black. When the browser interpolates a gradient between a vivid colour and this transparent keyword, it blends not only the alpha channel but also all three colour channels, passing through black as alpha decreases toward zero. The midpoint of a blue-to-transparent gradient calculated this way passes through a desaturated, dark grey value before reaching full transparency, because the blue colour channels are being blended with the zeros of the black channel simultaneously. The resulting dark band at the transition zone is especially obvious on light backgrounds, on gradients with a short fade distance, and on elements that sit over images or bright backgrounds. The fix is straightforward and reliable: replace the transparent keyword with the exact gradient colour at alpha 0. For a colour of #667eea (rgb 102, 126, 234), the correct transparent stop is rgba(102, 126, 234, 0). Interpolating between rgba(102, 126, 234, 1) and rgba(102, 126, 234, 0) only changes the alpha channel while holding the colour channels constant, producing a clean fade through the colour itself with no grey or dark artefact at any point in the transition.

Transparent gradients are used in several distinct and important CSS patterns. Overlay gradients on images use a dark-colour-to-transparent gradient to progressively darken the lower portion of a photo for text legibility without physically cropping or obscuring the image. Edge-fade masks apply a content-colour-to-transparent gradient using the CSS mask-image property on a container to make scrollable content visually dissolve at the edge, which clearly signals to users that more content exists off-screen. Section transition overlays use a page-background-colour-to-transparent gradient at the top or bottom of a page section to create a smooth visual handoff between sections with different background colours. Background-blend-mode gradients use semi-transparent gradient layers combined with the background-blend-mode property to create colour tinting and duotone effects on background images. In all of these cases, the rgba correction for transparent stops is essential for a clean, professional result.

FixTools generates the rgba-corrected transparent gradient CSS for any chosen colour and fade direction. The output always uses the rgba(r, g, b, 0) form for the transparent stop rather than the keyword, ensuring artefact-free rendering across all browsers and background contexts. Copy the background declaration and apply it directly to your element or to a pseudo-element overlay layer.

Modern CSS now offers two alternative syntaxes that simplify writing transparent gradient stops once you know they exist. The first is eight-digit hex notation: #667eea00 expresses the same colour as rgba(102, 126, 234, 0) but in a more compact form. The trailing 00 is the alpha channel in hex (zero being fully transparent, ff being fully opaque). The second is the relative colour syntax from CSS Color Level 5: linear-gradient(to right, #667eea, rgb(from #667eea r g b / 0)) lets you derive the transparent equivalent of a colour without manually converting the channels. The relative syntax keeps the source colour as the single source of truth, so updating the gradient colour later requires changing only one value rather than recalculating the rgba transparent stop separately. Browser support for relative colour syntax reached all major browsers during 2024, making it production-ready for most projects today.

MDN CSS gradients: transparent colours MDN CSS color: transparent keyword

How to use this tool

💡

Create a fade-to-transparent gradient. Example: background: linear-gradient(to bottom, rgba(102, 126, 234, 1) 0%, rgba(102, 126, 234, 0) 100%)

How It Works

Step-by-step guide to transparent gradient css:

1
Open the CSS Gradient Generator
Navigate to the FixTools CSS Gradient Generator. For transparent gradients, you will set one colour stop as your fully opaque starting colour and the other as a transparent stop. The generator automatically uses the rgba(r, g, b, 0) form of your chosen colour for the transparent stop rather than the CSS transparent keyword, preventing grey banding in all browsers.
2
Set your colour stop
Add your primary gradient colour as the opaque stop at the starting position of the fade. This is the colour that will be fully visible at one end of the gradient before it transitions to transparency. Set it at the position where you want the gradient to be at full opacity: 0% for a start-to-transparent fade or 100% for a transparent-to-colour fade.
3
Add the transparent stop
Add the transparent end stop at the position where you want the gradient to have fully faded out. The tool uses the rgba(r,g,b,0) form of your chosen opaque colour for this stop, ensuring the transition fades through the colour itself rather than through black. This is the technically correct approach that prevents the grey banding caused by the CSS transparent keyword.
4
Copy and apply as overlay
Copy the gradient CSS output and apply it to a pseudo-element, an absolutely positioned overlay div, or the container element itself depending on your intended effect. For image overlays and vignettes, use a ::before or ::after pseudo-element with position: absolute; inset: 0 covering the image. For edge-fade masks on scrollable containers, use the mask-image property instead of background.

Real-world examples

Common situations where this approach makes a real difference:

Image overlay for text legibility

A news and editorial site displays featured article images with a headline and byline overlaid at the lower portion of each image. Without any overlay treatment, white or light-coloured text on sky or cloud backgrounds has critically insufficient contrast for accessibility. The developer applies a pseudo-element with position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%) positioned over each image. The overlay progressively darkens the lower 55% of each image, providing a high-contrast dark ground for the text while preserving the photographic subject in the unaffected upper portion of the image frame.

Horizontally scrollable tag list edge fade

A product filter interface uses a row of tag chip buttons that overflows the container width on small viewports. On mobile, most filter chips are not visible without scrolling. The developer applies mask-image: linear-gradient(to right, black 80%, rgba(0,0,0,0) 100%) to the chips container. The visible tags appear at full opacity up to the 80% mark, then fade to transparent over the final 20%, making it visually obvious that more chips extend beyond the visible area and guiding the user to scroll horizontally without relying on a static right-arrow icon.

Full-viewport gradient that merges into a white section

A dark coloured hero section sits directly above a white content section and the hard horizontal colour boundary between them looks abrupt and poorly finished. The developer adds a transition div at the bottom of the hero with height: 60px and background: linear-gradient(to bottom, rgba(15, 52, 96, 0) 0%, rgba(255, 255, 255, 1) 100%). This small element creates a smooth visual blend from the deep navy hero background into the white section, producing a professional and considered layout transition with only five CSS declarations and no change to the surrounding section markup or layout.

Tooltip or popover background with fade edges

A data-dense analytics dashboard displays contextual tooltips for chart data points. The tooltip content occasionally exceeds the compact tooltip container height. The developer overlays a transparent gradient from rgba(255,255,255,0) at 70% to rgba(255,255,255,1) at 100% at the tooltip bottom using a positioned pseudo-element. This signals to users that the tooltip text is truncated and more content is available. The gradient uses rgba(255,255,255,0) rather than transparent to prevent the characteristic grey band that would otherwise appear over the white tooltip background at the fade midpoint.

When to use this guide

Use this when you need a gradient that fades to nothing: overlay effects on images, text masks on scrollable content, or edge-fade overlays on carousels.

Pro tips

Get better results with these expert suggestions:

Always use rgba(r, g, b, 0) instead of transparent

The CSS keyword transparent equals rgba(0,0,0,0), which introduces grey or dark banding when blended with any colour other than pure black because all three colour channels are interpolated through zero simultaneously. Replace every transparent stop with the gradient's actual colour at alpha 0. For hex colour #667eea, convert the channels to decimal (102, 126, 234) and write rgba(102, 126, 234, 0). This single substitution eliminates grey banding in virtually all practical gradient contexts with no other changes required.

Use mask-image with a transparent gradient for edge fades

To make content visually dissolve at the edge of a container without clipping it, use mask-image: linear-gradient(to right, black 70%, rgba(0,0,0,0) 100%) on the container element. The fully opaque black region of the mask shows the content at full opacity, and the transparent region fades it out smoothly. This technique is ideal for horizontal scrollable tag lists, navigation chip bars, and image carousels where you want to hint at off-screen content without adding hard clip edges or explicit scroll indicator controls.

Layer two transparent gradients for a bidirectional edge fade

To fade both the left and right edges of a scrollable container simultaneously, stack two background layers using comma-separated values: background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 15%), linear-gradient(to left, white 0%, rgba(255,255,255,0) 15%). Apply this to a pseudo-element with position: absolute; inset: 0; pointer-events: none layered above the scrollable content. The pointer-events: none ensures the overlay does not block click and scroll interactions with the content beneath it.

Use a short transparent stop position for a crisp overlay edge

Setting the rgba alpha-0 stop at 40% or 50% rather than at 100% means the gradient reaches full transparency by the element midpoint and then stays transparent for the remainder. For dark overlay effects where you only need the darkened region at the bottom of a photo, use: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 40%). This concentrates the dark overlay in the lower 40% of the image, leaving the upper 60% completely unaffected and clear for image detail or focal subject matter.

FAQ

Frequently asked questions

This is caused by using the CSS keyword transparent as a gradient colour stop. The keyword is formally defined as rgba(0,0,0,0), which is transparent black. When the browser interpolates a gradient between your colour and transparent, it blends all three colour channels toward zero simultaneously, passing through a desaturated grey or dark midpoint. The fix is to replace transparent with your actual gradient colour at alpha 0: if your colour is #667eea, use rgba(102, 126, 234, 0) as the transparent stop. Interpolating between the colour at alpha 1 and the same colour at alpha 0 only changes opacity, producing a clean fade with no dark artefact.

Add a pseudo-element to the image container with position: absolute; inset: 0 so it covers the full image area. Set the pseudo-element's background to your transparent gradient: background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%). Assign position: relative to the container. The pseudo-element renders as a gradient layer above the image, darkening the lower half for text legibility or the edges for a vignette effect. Adjust the stop positions and opacity values to control how far up the overlay extends and how dark it becomes at the base.

Avoid the bare transparent keyword as a colour stop in gradient functions. Instead, convert your chosen gradient colour to its rgba equivalent and set the alpha channel to 0. For hex #f093fb, the rgb channel values are 240, 147, 251, giving rgba(240, 147, 251, 0) as the transparent form. Use this in the gradient: linear-gradient(to right, rgba(240, 147, 251, 1) 0%, rgba(240, 147, 251, 0) 100%). Modern CSS also supports hex-alpha notation: #f093fb00 (two zero digits appended) is equivalent and somewhat shorter to write.

Set the mask-image property to a gradient on the element you want to fade: mask-image: linear-gradient(to right, black 70%, transparent 100%). The fully opaque (black) portions of the mask reveal the element at full opacity. The transparent portions hide it. Note that in mask-image, the transparent keyword does not cause grey banding because it is defining opacity in the mask channel rather than interpolating colour channels. Also include -webkit-mask-image with the same value for full Safari compatibility.

Yes. Stack two transparent gradient layers using comma-separated background values, each fading in the opposite direction: background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 15%), linear-gradient(to left, white 0%, rgba(255,255,255,0) 15%). Apply this to a pseudo-element overlay above the scrollable content, positioned with inset: 0 and pointer-events: none so it does not block user interaction. The first layer creates a left-edge fade and the second creates a right-edge fade, producing a bidirectional dissolve that signals overflow content on both sides of the container.

Split the hex colour into three two-digit pairs and convert each from base-16 to base-10: for #667eea, 66 hex = 102 decimal (red), 7e hex = 126 decimal (green), ea hex = 234 decimal (blue). The rgba transparent form is rgba(102, 126, 234, 0). Browser DevTools makes this easy: click on any colour swatch in the CSS inspector, switch the colour model to RGB, and read the three channel values directly. CSS also accepts a shorthand: #667eea00 where two trailing zero hex digits set the alpha channel to zero, which is equivalent to rgba(102, 126, 234, 0) and supported in all modern browsers.

Yes, in two distinct and meaningful ways. First, transparent gradient overlays on photographs increase text contrast for any text overlaid on the image, directly benefiting users with low vision or contrast sensitivity. Always verify the final contrast ratio of overlaid text against the darkened image region meets WCAG AA minimum: 4.5:1 for body text and 3:1 for large headings. Second, edge-fade gradients on horizontally or vertically scrollable containers provide a clear visual affordance signalling that more content exists off-screen, reducing cognitive load for all users and particularly benefiting those who rely on explicit visual cues for navigation.

Yes. Layer the transparent gradient above a background image using comma-separated background values: background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%), url(photo.jpg) center/cover no-repeat. The gradient renders above the image. The first value in the list renders on top, so the gradient is always in front of the image layer. Adjust the gradient colour, opacity, and stop positions to control how dark the overlay becomes at the bottom versus the top of the image element.

iOS Safari sometimes rasterises transparent gradient overlays at a lower precision than other browsers, which can produce a faintly visible boundary line where the transparent stop ends. Three fixes resolve this reliably. First, extend the transparent stop beyond the element bounds: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 110%) places the fully-transparent point outside the visible element area so the boundary cannot be seen. Second, add transform: translateZ(0) or will-change: transform to the overlay element, which forces full GPU compositing and improves rasterisation precision. Third, ensure the parent element has a non-transparent background so the overlay has a stable composition target rather than blending into the page below at varying alpha levels.

For most cases, a transparent gradient is the better choice because it does not affect child elements. Setting opacity on a parent applies that opacity to every descendant, fading text, icons, and child content along with the background. A transparent gradient applied as the parent's background or as a pseudo-element overlay leaves the children at full opacity while the gradient itself fades. This distinction matters most when you want the container to look semi-transparent or to dissolve at the edges while keeping interior content perfectly legible. Use opacity only when you genuinely want everything inside the element to fade together, which is less common than the more selective behaviour a gradient provides.