Power Your Software Testing with AI and Cloud

Supercharge QA with AI for Faster & Smarter Software Testing

Start free Testing

Next-Gen App & Browser Testing Cloud

Blending of HTML/SVG elements

The CSS mix-blend-mode property is an experimental feature that allows for blending between HTML elements and custom SVG elements.

Last updated on : 2026-02-09

Browser Versions

IE

Edge

Firefox

Chrome

Safari

Opera

5.5 - 11

12 - 18

79 - 144

2 - 31

32 - 150

4 - 40

41 - 147

3.2 - 7

7.1 - 26.3

9.5 - 28

29 - 125

Fully Supported

Partially

No Support

Browser Compatibility

Blending of HTML/SVG elements on IE is not supported on any IE versions.

Blending of HTML/SVG elements on Edge is fully supported on 79-144, and not supported on 12-18 Edge versions.

Blending of HTML/SVG elements on Firefox is fully supported on 32-150, and not supported on 2-31 Firefox versions.

Blending of HTML/SVG elements on Chrome is fully supported on 41-147, and not supported on 4-40 Chrome versions.

Blending of HTML/SVG elements on Safari is partially supported on 7.1-26.3, and not supported on 3.2-7 Safari versions.

Blending of HTML/SVG elements on Opera is fully supported on 29-125, and not supported on 9.5-28 Opera versions.

Blending of HTML/SVG elements on Safari on iOS is partially supported on 8.1-26.3, and not supported on 3.2-7 Safari on iOS versions.

Blending of HTML/SVG elements on Android Browser is fully supported on 97-144, and not supported on 2.3-4 Android Browser versions.

Blending of HTML/SVG elements on Opera Mobile is fully supported on 64-80, and not supported on 10-12 Opera Mobile versions.

Blending of HTML/SVG elements on Chrome for Android is fully supported on all Chrome for Android versions.

Blending of HTML/SVG elements on Firefox for Android is fully supported on all Firefox for Android versions.

Blending of HTML/SVG elements on Samsung Internet is fully supported on 5-29, and not supported on 4-4 Samsung Internet versions.

Browser Support for Blending of HTML/SVG elements

Blending of HTML/SVG elements on Chrome

Blending of HTML/SVG elements on Safari

Blending of HTML/SVG elements on Firefox

Blending of HTML/SVG elements on Internet Explorer

Blending of HTML/SVG elements on Opera

Blending of HTML/SVG elements on Edge

References

Data sourced from

92

High

Overall Browser Compatibility Score

Note:Blending of HTML/SVG elements shows a browser compatibility score of 92. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.

Test on 3000+ browsers for Blending of HTML/SVG elements & more

Test your website for Blending of HTML/SVG elements and other web technologies. Get 100 FREE automation test minutes!

More Web Technologies

CSS
HTML 5
SVG
JS API
Security
JavaScript
Other Web Technologies

CSS background-attachment

Background-clip: text

CSS3 Background-image options

background-position-x & background-position-y

CSS background-repeat round and space

CSS3 Border images

CSS3 Border-radius (rounded corners)

calc() as CSS unit value

ch (character) unit

CSS all property

CSS :any-link selector

CSS @apply rule

CSS Counter Styles

CSS Backdrop Filter

CSS background-position edge offsets

CSS background-blend-mode

CSS box-decoration-break

CSS3 Box-shadow

CSS Canvas Drawings

CSS caret-color

CSS Cascade Layers

Case-insensitive CSS attribute selectors

CSS clip-path property (for HTML)

CSS print-color-adjust

CSS color() function

CSS Conical Gradients

CSS Container Queries (Size)

CSS Containment

CSS content-visibility

Crisp edges/pixelated images

CSS Cross-Fade Function

:default CSS pseudo-class

Explicit descendant combinator >>

CSS Device Adaptation

:dir() CSS pseudo-class

CSS display: contents

CSS element() function

CSS Environment Variables env()

CSS Exclusions Level 1

CSS Feature Queries

CSS filter() function

CSS Filter Effects

::first-letter CSS pseudo-element selector

CSS first-line pseudo-element

CSS position:fixed

:focus-visible CSS pseudo-class

:focus-within CSS pseudo-class

CSS font-display

CSS font-stretch

CSS Generated content for pseudo-elements

CSS Grid Layout (level 1)

CSS hanging-punctuation

:has() CSS relational pseudo-class

CSS Hyphenation

CSS3 image-orientation

:in-range and :out-of-range CSS pseudo-classes

:indeterminate CSS pseudo-class

CSS Initial Letter

CSS initial value

LCH and Lab color values

letter-spacing CSS property

CSS Logical Properties

CSS ::marker pseudo-element

:is() CSS pseudo-class

CSS math functions min(), max() and clamp()

Media Queries: interaction media features

Media Queries: resolution feature

CSS3 Media Queries

Blending of HTML/SVG elements

CSS Motion Path

selector list argument of :not()

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes

:optional CSS pseudo-class

CSS overflow property

CSS overflow-anchor (Scroll Anchoring)

CSS overflow: overlay

CSS overscroll-behavior

CSS page-break properties

CSS Painting API

::placeholder CSS pseudo-element

:placeholder-shown CSS pseudo-class

CSS :read-only and :read-write selectors

Rebeccapurple color

CSS Reflections

CSS Repeating Gradients

CSS resize property

CSS revert value

#rrggbbaa hex color notation

CSS Scroll-behavior

CSS @scroll-timeline

CSS scrollbar styling

CSS 2.1 selectors

::selection CSS pseudo-element

CSS Shapes Level 1

CSS Scroll Snap

CSS position:sticky

CSS Table display

CSS3 text-align-last

CSS text-indent

CSS text-justify

CSS text-orientation

CSS3 Text-shadow

CSS touch-action property

CSS3 Transitions

CSS unset value

CSS Variables (Custom Properties)

CSS widows & orphans

CSS writing-mode property

CSS3 attr() function for all properties

CSS3 Box-sizing

CSS3 Cursors (original values)

CSS grab & grabbing cursors

CSS3 Cursors: zoom-in & zoom-out

CSS currentColor value

Window.devicePixelRatio

ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family

CSS Flexible Box Layout Module

gap property for Flexbox

display: flow-root

system-ui value for font-family

CSS font-feature-settings

CSS3 font-kerning

CSS Font Loading

CSS font-size-adjust

CSS font-smooth

Font unicode-range subsetting

CSS font-variant-alternates

CSS font-variant-numeric

@font-face Web fonts

getComputedStyle

CSS inline-block

Intrinsic & Extrinsic Sizing

CSS justify-content: space-evenly

High-quality kerning pairs & ligatures

CSS min/max-width/height

CSS3 Multiple backgrounds

CSS3 Multiple column layout

CSS3 object-fit/object-position

CSS outline properties

CSS pointer-events (for HTML)

prefers-color-scheme media query

prefers-reduced-motion media query

rem (root em) units

display: run-in

Scoped attribute

SVG in CSS backgrounds

text-decoration styling

text-emphasis styling

CSS3 Text-overflow

CSS text-size-adjust

CSS text-stroke and text-fill

CSS3 2D Transforms

CSS3 3D Transforms

TTF/OTF - TrueType and OpenType font support

CSS user-select: none

Small, Large, and Dynamic viewport units

Viewport units: vw, vh, vmin, vmax

CSS -webkit-user-drag property

CSS will-change property

CSS3 word-break

CSS3 Overflow-wrap

CSS @when / @else conditional rules

CSS font-palette

CSS Container Query Units

CSS property: accent-color

types: <color>: `color-contrast()`

types: <color>: `hwb()` (HWB color model)

types: <color>: `color-mix()`

HTMLElement API: inert

CSS at-rule: `@property`

CSS at-rule: `@media`: `prefers-reduced-data` media feature

Media Queries: Range Syntax

CSS Container Style Queries

-moz-float-edge

-moz-force-broken-image-icon

-moz-image-region

-moz-outline-radius

-moz-outline-radius-bottomleft

-moz-outline-radius-bottomright

-moz-outline-radius-topleft

-moz-outline-radius-topright

-moz-user-focus

-moz-user-input

-webkit-border-before

-webkit-box-reflect

-webkit-line-clamp

-webkit-mask-attachment

-webkit-mask-box-image

-webkit-mask-composite

-webkit-mask-position-x

-webkit-mask-position-y

-webkit-mask-repeat-x

-webkit-mask-repeat-y

-webkit-overflow-scrolling

-webkit-tap-highlight-color

-webkit-text-fill-color

-webkit-text-security

-webkit-text-stroke

-webkit-text-stroke-color

-webkit-text-stroke-width

-webkit-touch-callout

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

box-ordinal-group

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-language-override

font-optical-sizing

font-variant-caps

font-variant-east-asian

font-variant-emoji

font-variant-ligatures

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

hyphenate-character

hyphenate-limit-chars

image-orientation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

line-height-step

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

masonry-auto-flow

max-inline-size

min-inline-size

object-position

offset-distance

offset-position

overflow-anchor

overflow-clip-margin

overflow-inline

overscroll-behavior

overscroll-behavior-block

overscroll-behavior-inline

overscroll-behavior-x

overscroll-behavior-y

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

page-break-after

page-break-before

page-break-inside

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-coordinate

scroll-snap-destination

scroll-snap-points-x

scroll-snap-points-y

scroll-snap-stop

scroll-snap-type

scroll-snap-type-x

scroll-snap-type-y

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration-color

text-decoration-line

text-decoration-skip

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

CSS Relative color syntax

CSS text-wrap: balance

View Transitions API (single-document)

Scoped Styles: the @scope rule

CSS Anchor Positioning

View Transitions (cross-document)

CSS if() function

Did you find this page helpful?

TestMu AI forEnterprise

Get access to solutions built on Enterprise
grade security, privacy, & compliance

Advanced access controls
Advanced data retention rules
Advanced Local Testing
Premium Support options
Early access to beta features
Private Slack Channel
Unlimited Manual Accessibility DevTools Tests