Free · Fast · Privacy-first

CSS Background Blend Mode Generator

background-blend-mode lets you composite background layers together using Photoshop-style blend modes directly in CSS, with no canvas, no JavaScript, and no exported flattened image files needed.

⚡

Visual preview of all CSS blend modes on an image plus gradient combo

🔒

Generates background-blend-mode with the full background shorthand

✨

Supports multiply, screen, overlay, luminosity, and all 16 blend modes

⚡

Instant comparison of blend modes side by side

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.

How background-blend-mode Composites Multiple Background Layers

background-blend-mode applies a blend mode to each background layer in relation to the layer below it. A comma-separated list of blend mode values maps to the comma-separated background layers: the first value applies to the first (topmost) layer. With two layers, background: url(photo.jpg), linear-gradient(blue, purple) and background-blend-mode: multiply, normal, the image is multiplied against the gradient. Normal is the default mode (no blending). The multiply blend mode multiplies each pixel channel value together: white (1.0) times any colour returns the colour unchanged, and black (0.0) times any colour returns black. This effectively removes white areas from the top image layer.

Screen blend mode is the inverse of multiply. It inverts both layers, multiplies, then inverts again. The result is always lighter than either input. Screen removes dark areas from the top layer, making it useful for light-coloured elements (fire, smoke, light flares) where the black background should become transparent. Overlay combines multiply (for dark areas) and screen (for light areas): it increases contrast by darkening shadows and brightening highlights. The result depends heavily on the luminance of the base layer. On a medium-grey base, overlay produces little change. On a high-contrast image, overlay amplifies the existing contrast dramatically.

Browser support for background-blend-mode is good across all modern browsers: Chrome 35, Firefox 30, Safari 8, and Edge 17 all support it. The property is not supported in IE11. Luminosity blend mode is particularly useful: it applies the luminance of the top layer to the hue and chroma of the bottom layer. Compositing a greyscale gradient over a colour photograph with luminosity: luminosity makes the photograph appear to shift towards greyscale in the gradient-dark areas. Color blend mode does the opposite: it applies the colour of the top layer while preserving the luminance of the bottom layer, creating a colour tinting effect that preserves image detail better than an rgba overlay.

Choosing between background-blend-mode and a separate overlay element comes down to control and reusability. background-blend-mode keeps the entire effect in one CSS rule, which is ideal for hero sections, card backgrounds, and any element where the image and tint travel together as a unit. The downside is that you cannot animate the blend mode itself, and you cannot apply different blend modes to different children. For interactive effects where a hover or scroll position should switch between blended and unblended states, an absolutely positioned overlay element with mix-blend-mode is more flexible because you can fade its opacity in or out. For purely visual compositing that does not need to change after the page renders, background-blend-mode produces the cleanest markup with no extra DOM nodes and no z-index management.

MDN: background-blend-mode W3C Compositing and Blending Level 1

How to use this tool

💡

Enter a background image URL and choose a gradient or solid colour for the second background layer. Select a blend mode from the dropdown to see the composited effect in the preview. Copy the CSS when the visual result matches your design.

How It Works

Step-by-step guide to css background blend mode generator:

1
Enter a background image URL
Paste the image URL into the input. This becomes the base photograph or texture for blending. Use the actual production image rather than a placeholder so the preview reflects the real tonal range, otherwise the blend mode choice that looks good against a stock photo may not survive the swap to your final artwork.
2
Add a second background layer
Choose a gradient or solid colour as the second layer. This is the layer the blend mode is applied to. For brand tinting, a solid colour works well. For duotone effects, a two-stop linear gradient between brand colours produces the strongest visual character.
3
Select a blend mode
Pick from the 16 available CSS blend modes in the dropdown. The preview composites the layers in real time so you can compare options side by side without reloading. Try multiply for darkening tints, screen for lightening, overlay for contrast, color for hue replacement, and luminosity for duotone treatments.
4
Copy the CSS
Copy the background and background-blend-mode declarations as a single block. Paste them into your stylesheet. The tool emits both the shorthand background property with both layers and the explicit background-blend-mode list so the output is portable into any project regardless of build tooling.

Real-world examples

Common situations where this approach makes a real difference:

Designer applying a brand colour tint to photography

A designer uses background-blend-mode: color to tint all photography on a portfolio site with the brand indigo colour (#4f46e5). They layer a solid indigo background-color under each image and set background-blend-mode: color. The images retain their luminance contrast but shift to the brand colour palette. Hovering a portfolio card adds a transition that changes blend mode to normal, revealing the original full-colour photograph.

Developer creating a duotone effect with two gradients

A developer wants a two-colour duotone effect on a team photograph. They layer a gradient from cyan (#06b6d4) to purple (#7c3aed) over the image and use background-blend-mode: luminosity. The image shows as the cyan-to-purple tonal range mapped to the original image luminance. The effect matches what would take multiple adjustment layers in Photoshop and is achievable in three lines of CSS.

Engineer compositing a white-background PNG logo over a coloured section

An engineer needs to display a sponsor logo saved as a PNG with a white background over a dark section background. Instead of re-exporting the logo as a transparent PNG, they use the logo as a background image with background-blend-mode: multiply. The white areas multiply to the section background colour and disappear. The dark logo artwork stays visible, compositing correctly over the section background.

Student exploring CSS compositing models

A student compares all 16 blend modes on the same photograph and gradient combination using the tool. They observe that multiply and screen are inverse operations, that overlay amplifies contrast, and that difference produces a psychedelic inverted effect. The interactive comparison builds an intuitive understanding of compositing that would take much longer to develop through reading the W3C compositing specification alone.

Pro tips

Get better results with these expert suggestions:

Use isolation: isolate to contain blend modes

By default, blend modes composite against all visible content below, including content outside the element. Adding isolation: isolate to a parent element creates a new stacking context that contains the blend effect. Child elements blend only with siblings within the isolation boundary, not with background content outside the parent.

Combine mix-blend-mode with background-blend-mode for layered effects

background-blend-mode applies within an element background layers. mix-blend-mode applies the element itself against the content below it in the document. Using both together lets you blend background layers within an element and then blend the entire element against the page background.

Use luminosity for stylised greyscale photographs

Layer a flat grey or gradient as the second background layer and set background-blend-mode: luminosity. The image retains its luminance structure but loses its colour, creating a stylised greyscale effect that can be reversed on hover by changing the blend mode.

Note that background-blend-mode does not affect the first listed layer if it is the only layer

background-blend-mode on a single background layer has no visible effect because there is no second layer to blend against. You need at least two background layers (or a background-color acting as the base layer) for the blend mode to produce a visible composite result.

Use multiply to remove white backgrounds from images

Multiply blend mode removes white areas from the top layer, making white effectively transparent. Apply multiply to a PNG with a white background to composite it over a coloured background without needing to cut out the image in an editor.

Combine with background-color for blend mode tinting

Set background-color on the element and background-blend-mode: color on the image layer. The image blends with the background-color, applying the colour hue to the image while preserving luminance detail. Changing background-color recolours the entire image without re-exporting assets.

Test blend modes on different image types

Blend mode results vary significantly based on image content and tone. Test multiply on a dark photograph versus a light one: the results are very different. Always preview the blend mode on the actual image you will use in production rather than a placeholder.

FAQ

Frequently asked questions

background-blend-mode specifies how an element background layers blend with each other. It takes the same blend mode values as mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. The property accepts a comma-separated list to assign different blend modes to each background layer independently.

background-blend-mode controls how multiple background layers within a single element blend with each other. mix-blend-mode controls how an entire element composites against everything visually beneath it in the document (including other elements). background-blend-mode affects only the internal background layers. mix-blend-mode affects the element as a whole. You can use both simultaneously: background-blend-mode to composite layers within the element, then mix-blend-mode to blend the full element against the page background.

Multiply multiplies the normalized channel values of two layers together. White (channel value 1.0) multiplied by any colour returns that colour unchanged. Black (channel value 0.0) multiplied by any colour returns black. Mid-tones darken proportionally. The result is always equal to or darker than either input layer. Multiply is used to composite dark artwork or textures over colour backgrounds, making white areas effectively transparent.

Yes. background-color participates in blending as the bottom-most background layer when background-blend-mode is applied. You do not need to specify the colour as a background-image layer. Setting background-color: #4f46e5 and background-image: url(photo.jpg) with background-blend-mode: color blends the image against the background-color value. The background-color effectively acts as an infinite-size solid colour layer beneath the background-image layers.

Layer two background layers over the image: a gradient from colour-A to colour-B, and below that the image. Set background-blend-mode: luminosity on the image layer. The image loses its colour and the gradient colour maps to the image luminance, creating a two-colour effect. Alternatively, use a CSS filter: grayscale(100%) on the image element first, then apply a colour overlay using mix-blend-mode: color on a sibling element positioned over the image.

background-blend-mode is supported in Chrome 35 (2014), Firefox 30 (2014), Safari 8 (2014), and Edge 17 (2018). It is not supported in Internet Explorer 11. Current browser support covers all browsers in active use. Check caniuse.com for specific version data if targeting legacy browsers. No vendor prefixes are required for any currently supported browser version.

No. blend-mode values are not interpolatable and cannot be transitioned or animated directly. The value switches instantly. To create a visual transition between blended and non-blended states, animate a property that affects the visual result rather than the blend mode itself: animate opacity on a pseudo-element overlay to fade a blend effect in or out, or animate the colour values in the second background layer while keeping the blend mode constant.

Set the image as a background-image layer and add a background-color for the desired result colour beneath it. Use background-blend-mode: multiply. White pixels in the image (channel value 1.0) multiply to the background-color value, effectively becoming the background colour. Dark pixels multiply toward black. This works best for images with a pure white background and dark artwork. Off-white backgrounds (near-white rather than exactly #ffffff) will show as a light tint rather than fully transparent, so if the image was photographed against a softbox rather than created in software you may need to either touch up the white in an editor or accept a faint tint.

There is no visible effect from applying background-blend-mode to a single background layer because the blend mode needs a second layer to composite against. The exception is when background-color is set: background-color acts as the implicit bottom layer beneath the listed background-image layers, so a single background-image plus a background-color does produce a blended result. If you set only one background-image and no background-color, the blend mode is computed but the result is identical to no blend mode at all because there is nothing to blend with. Add a background-color or a second background-image to see the effect.

They operate at different stages of the rendering pipeline and can be combined without conflict. background-blend-mode composites the layers inside the element background before anything else is drawn. backdrop-filter applies a filter (such as blur or brightness) to the pixels behind the element through any transparent areas. If your background-blend-mode produces partial transparency or uses a translucent gradient layer, backdrop-filter operates on the content behind those translucent regions. The order is background layers composite with blend modes, then backdrop-filter samples the result, then the element foreground content is drawn on top.