Free · Fast · Privacy-first

CSS Background Overlay Generator

A background overlay darkens, lightens, or tints a background image to make overlaid text readable and to give photographic content a deliberate brand tone.

⚡

Generates pseudo-element overlay with position: absolute

🔒

Supports rgba solid overlays and gradient overlays

✨

Multiple background stacking approach also generated

⚡

Live preview of overlay opacity and colour on a background image

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

FreeNo signupWhite-label

Add this Background Gen to your website

Drop the Background Gen 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/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

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

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

Two Ways to Apply CSS Background Overlays: Stacking and Pseudo-Elements

The background shorthand overlay method stacks a semi-transparent gradient or rgba layer above the image using comma-separated layers, and the first layer listed paints on top of every subsequent layer. background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg") center/cover no-repeat is the canonical example. The approach is concise, requires no additional HTML, and adds zero extra CSS rules to your stylesheet. The limitation is that the overlay applies to the element background only: child content within the element is not tinted or darkened, only the background layer is. Adjusting the rgba transparency directly controls overlay density. A gradient overlay running from rgba(0,0,0,0.7) at the bottom to transparent at the top provides more refined control than a flat overlay when the text sits at the bottom of the element.

The pseudo-element overlay uses ::before with position: absolute and inset: 0, which is the modern shorthand for top: 0; right: 0; bottom: 0; left: 0 all at once. The parent element must have position: relative to contain the absolute pseudo-element inside its own box. Set a z-index on the overlay and a higher z-index on the content wrapper to ensure the overlay sits between the background and the text in the stacking context. This approach allows the overlay to carry its own background, border, blend mode, and animation independently of the element background. You can transition the overlay opacity on hover without affecting the underlying image, which is not possible with shorthand stacking because the entire background property would need to interpolate.

Multiple background stacking with rgba colours handles non-gradient overlays efficiently and reads cleanly in code review. background: rgba(79, 70, 229, 0.4), url("photo.jpg") center/cover applies a semi-transparent indigo tint over the image with a single declaration. CSS treats solid rgba colours in background layers as infinitely-sized gradient images for stacking purposes, so the syntax works exactly like layering gradient layers. Adding multiple colour layers creates blended overlays: background: rgba(0, 0, 0, 0.3), rgba(79, 70, 229, 0.2), url("photo.jpg") center/cover stacks a black darkening layer and a colour tint above the image. The order of layers determines which tint applies on top and how the resulting tone composites with the image beneath.

Pointer events and accessibility are easy to overlook when adding overlays. A pseudo-element overlay with a higher z-index than child content will swallow click events on buttons and links unless you set pointer-events: none on the overlay. Adding pointer-events: none keeps the overlay purely visual while letting clicks pass through to the content below. For accessibility, overlays should never be the only mechanism that makes text readable: if the overlay fails to load due to a connection issue or a custom user stylesheet, the text must still pass contrast against the underlying image. Always set a fallback background-color on the element so the text remains readable even before the image arrives or if the image fails entirely.

MDN: ::before pseudo-element MDN: Using multiple backgrounds

How to use this tool

💡

Enter a background image URL and choose an overlay type: solid rgba colour, gradient, or pseudo-element. Set the overlay colour and opacity using the sliders. The tool generates either the background shorthand with stacked layers or the ::before pseudo-element CSS depending on your selection.

How It Works

Step-by-step guide to css background overlay generator:

1
Enter the background image URL
Paste the image URL from your CDN or local asset path. The preview renders the image at full container width with cover sizing, so you can immediately see how the overlay will read against the actual photograph rather than against a placeholder you will need to replace later.
2
Choose overlay approach
Select background stacking or pseudo-element based on whether you need interactivity. Background stacking is the simplest possible overlay for static decoration. The pseudo-element approach is required if you want hover transitions, blend mode tinting, scroll-bound animation, or pointer-events control on the overlay layer.
3
Set overlay colour and opacity
Choose the overlay colour with the colour picker and drag the opacity slider to find the right balance. Use a darker opacity for light text readability and a lighter opacity for subtle brand tints. The preview updates in real time, so you can iterate until the headline reads clearly against every part of the underlying image.
4
Copy the CSS output
Copy the generated CSS in one click. For the pseudo-element approach, the output includes both the parent element rules and the ::before rules with proper positioning, z-index, and pointer-events declarations. Paste into your stylesheet and the overlay renders identically to the preview.

Real-world examples

Common situations where this approach makes a real difference:

Developer adding a tinted overlay for a team section

A developer needs to apply a brand-colour tint to team member photographs in a grid layout so the section reads cohesively despite the photos being shot in different studios over two years. They use the pseudo-element overlay with background: rgba(79, 70, 229, 0.4) and mix-blend-mode: multiply to tint each photograph indigo on hover. The ::before overlay transitions from opacity: 0 to opacity: 1 on :hover with a 0.3s ease transition, creating a smooth colour reveal when hovering each team card while leaving the unhovered cards in full colour.

Designer applying a gradient overlay for a text-heavy hero

A designer creates a hero section with a bright sunlit landscape photograph and a dark serif headline that must read clearly without sacrificing the brightness of the image. To prevent the headline from being lost against a light sky, they apply a directional gradient using linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 60%) stacked above the image in the background shorthand. The gradient darkens only the top 60% of the section where the headline sits while the lower image area stays bright, preserving the photographic impact of the scene.

Accessibility engineer verifying text contrast on overlaid backgrounds

An accessibility engineer needs to confirm that white headline text on a hero with a 50% black overlay passes WCAG AA across the full range of images the marketing team rotates through. They sample the brightest image tone under the overlay using a colour picker, calculate the effective composited background luminance, and check the contrast ratio against pure white text. The 50% overlay produces 7.2:1 on the brightest test image, which passes AAA comfortably. They document the minimum overlay opacity required for AA compliance and add it to the design system guidelines so future marketing assets stay compliant.

Student learning CSS stacking context with overlays

A student creates a card with a ::before pseudo-element overlay but the overlay covers the card title text so the headline disappears under a translucent black layer. The tool shows them they need position: relative on the text wrapper and a z-index higher than the overlay to bring the text above the pseudo-element in the stacking context. Without position: relative on the content, z-index has no effect at all and the overlay stays on top of the text. Seeing the fix demonstrated visually clarifies why z-index requires a positioned ancestor to participate in the stacking context.

Pro tips

Get better results with these expert suggestions:

Use mix-blend-mode on a pseudo-element for colour tinting

Set the pseudo-element background to a solid brand colour and add mix-blend-mode: multiply. The colour multiplies with the image pixels beneath, creating a duotone-style tint effect. Black areas in the image stay black, lighter areas take on the overlay colour, and the result preserves contrast and shape rather than flattening into a uniform tint. This is far more visually refined than an rgba veil for brand-coloured overlays and reads as intentional design.

Use inset shorthand instead of four position values

inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0 and reduces four lines of boilerplate to a single declaration on every pseudo-element overlay. inset is supported in all modern browsers since 2021 and reads more clearly in code review. Include the four-value fallback only if your browser support matrix still includes pre-2021 browsers that you cannot drop, which is rare in 2026.

Animate overlay opacity for image reveal effects

Set the ::before overlay to opacity: 1 by default and transition to opacity: 0 on hover, which produces an image reveal effect where hovering an element fades out a colour overlay to show the full-colour image beneath. Combine with transition: opacity 0.5s ease for a smooth reveal that feels deliberate rather than abrupt. The technique is the foundation of most modern hover-reveal portfolio grids and works without any JavaScript at all.

Test overlay at the WCAG contrast minimum for text

After applying the overlay, measure the effective background colour at the exact point where text sits rather than at an arbitrary point on the image. Use a colour picker tool to sample the darkened image tone under the overlay and check the resulting contrast ratio against the text colour using a WCAG contrast checker. A 50% black overlay on a mid-grey image may still not reach 4.5:1 for small body text, and the deficit is invisible until you measure.

Use pseudo-element overlay for hover transitions

A ::before pseudo-element overlay allows transition: opacity 0.3s ease on hover. The image remains unchanged while the overlay fades in or out. Background shorthand stacking cannot transition individual layers independently.

Set z-index on content above pseudo-element overlay

A ::before overlay at z-index: 1 will cover content unless the content wrapper has z-index: 2 and position: relative. Without this, the overlay blocks pointer events and covers text even though it appears behind visually in some browsers.

Use directional gradients instead of flat overlays

A flat rgba overlay at 50% opacity applies the same darkening to the entire image. A gradient overlay from dark at the bottom to transparent at the top darkens only the text area while leaving the rest of the image more visible, which looks more polished.

FAQ

Frequently asked questions

Layer a semi-transparent rgba or gradient background above the image using the background shorthand with comma-separated layers, and list the overlay first because the first layer paints on top. background: rgba(0,0,0,0.5), url("photo.jpg") center/cover no-repeat is the canonical shorthand example. The rgba layer acts as an infinitely sized colour overlay on top of the image. Alternatively, use a ::before pseudo-element with position: absolute, inset: 0, background: rgba(0,0,0,0.5), and position: relative on the parent so the pseudo-element is positioned inside the parent box. Pick the pseudo-element form when you need transitions or blend modes.

Background stacking via the background shorthand is more concise and requires no additional CSS rules, no parent positioning, and no z-index management. The trade-off is that it cannot be transitioned or animated independently from the image, because the entire background property would need to interpolate. A ::before pseudo-element overlay is a separate paint layer that can have its own transitions, blend modes, and animations and can carry pointer-events: none to stay non-interactive. Use background stacking for static decoration and use the pseudo-element approach for interactive effects such as hover colour reveals, animated opacity changes, and blend mode tinting.

The pseudo-element sits in the same stacking context as the element content, and absolutely positioned elements paint above static content by default. Add position: relative and a z-index value to the content wrapper so it creates a stacking context above the pseudo-element. Set the pseudo-element z-index to a lower value such as 1, and the content wrapper to z-index: 2. If the pseudo-element has no z-index or a higher z-index than the content, it paints above the text regardless of source order in the CSS, which is the most common stacking context bug developers hit when first using overlays.

Yes, but only the pseudo-element form animates cleanly. A ::before pseudo-element overlay can be animated with transition: opacity 0.3s ease or a keyframe animation on the opacity, background-color, or filter properties without affecting the underlying image at all. Background stacking overlays cannot be animated independently because the entire background shorthand has to interpolate as one value. Attempting to fade a stacked overlay requires animating the entire shorthand, which is not reliably interpolatable across browsers and produces visual artifacts. For any animated overlay, always reach for the pseudo-element approach.

Apply mix-blend-mode to a ::before pseudo-element overlay rather than to the background shorthand layer, since mix-blend-mode does not apply to background layers directly. Set the pseudo-element background to a solid brand colour and mix-blend-mode: multiply, screen, or overlay depending on the effect you want. Multiply darkens by multiplying channel values, screen lightens by inverse-multiplying, and overlay does both depending on the luminance of each pixel. The parent element must not have a non-transparent background painted at the isolation boundary, or you can add isolation: isolate on the parent to scope the blending to its own stacking context.

The right opacity depends on the image tone, the text colour, and the text size. For white text on a generic photograph, start at rgba(0,0,0,0.4) and increase the alpha until the contrast ratio reaches at least 4.5:1 for WCAG AA on small body text. On bright or high-contrast images, you may need 0.55 to 0.65 to maintain compliance. On dark images, 0.25 alpha can be sufficient and keeps more of the image visible. Always verify the actual contrast ratio with a checker rather than estimating by eye, since perceived darkness and measured luminance often diverge. The effective background is the overlay colour composited over the average image tone at the text location.

Use a brand colour with alpha in the rgba overlay so the tint blends with the image while letting some of the photo show through. rgba(79, 70, 229, 0.4) applies a 40% opacity indigo tint that reads as a brand wash. For a more sophisticated and contrast-preserving tint, use a ::before pseudo-element with mix-blend-mode: multiply and a fully opaque brand colour. The multiply blend mode darkens the image toward the tint colour and preserves shape detail. Hue blend mode applies only the colour of the overlay while preserving image luminance, which maintains image contrast while shifting the overall tone toward your brand palette.

A ::before pseudo-element with a higher z-index than child elements intercepts pointer events and silently blocks clicks on the content below, which is a frequent source of inscrutable bug reports. Fix this with pointer-events: none on the ::before overlay and ensure the content has position: relative with a z-index above the overlay so it remains interactive. The pointer-events: none declaration makes the overlay completely non-interactive at the input layer while still painting visually, so clicks, taps, and hover events all pass through to the content beneath as if the overlay were not there.

Yes, and it is one of the cleanest ways to add a subtle dark veil. background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg") creates a uniform overlay because a gradient with identical start and end stops paints as a solid colour. You can also use directional values such as linear-gradient(to top, rgba(0,0,0,0.7), transparent) to darken only one side. This pattern is widely used in production design systems because it keeps the entire overlay inside the background property and avoids an additional CSS rule.