Testing & QA SummitDecode AI-Powered Quality Engineering from AI & QA Leaders,Register for Free!White ArrowWhite Arrow

Power Your Software Testing with AI and Cloud

Supercharge QA with AI for Faster & Smarter Software Testing

Start free TestingArrowArrow
Next-Gen App & Browser Testing Cloud

CSS Cross-Fade Function

A function that is used to create a crossfade between images. The images are faded based on a percentage value.

Last updated on : 2026-02-09

Browser Versions

IEIE

EdgeEdge

FirefoxFirefox

ChromeChrome

SafariSafari

OperaOpera

5.5 - 11
Test on IE 5.5 - 11 ...
12 - 18
Test on Edge 12 - 18 ...
79 - 144
Test on Edge 79 - 144 ...
2 - 150
Test on Firefox 2 - 150 ...
4 - 16
Test on Chrome 4 - 16 ...
17 - 147
Test on Chrome 17 - 147 ...
3.2 - 5
Test on Safari 3.2 - 5 ...
5.1 - 26.3
Test on Safari 5.1 - 26.3 ...
9.5 - 12
Test on Opera 9.5 - 12 ...
15 - 125
Test on Opera 15 - 125 ...

...Fully Supported

...Partially

...No Support

Specifications

CSS Image Values and Replaced Content Module Level 4 # cross-fade-function

Browser Compatibility

CSS Cross-Fade Function on IE is not supported on any IE versions.

CSS Cross-Fade Function on Edge is fully supported on 79-144, and not supported on 12-18 Edge versions.

CSS Cross-Fade Function on Firefox is not supported on any Firefox versions.

CSS Cross-Fade Function on Chrome is fully supported on 17-147, and not supported on 4-16 Chrome versions.

CSS Cross-Fade Function on Safari is fully supported on 5.1-26.3, and not supported on 3.2-5 Safari versions.

CSS Cross-Fade Function on Opera is fully supported on 15-125, and not supported on 9.5-12 Opera versions.

CSS Cross-Fade Function on Safari on iOS is fully supported on 5-26.3, and not supported on 3.2-4 Safari on iOS versions.

CSS Cross-Fade Function on Android Browser is fully supported on 4.4-144, and not supported on 2.3-4 Android Browser versions.

CSS Cross-Fade Function on Opera Mobile is fully supported on 64-80, and not supported on 10-12 Opera Mobile versions.

CSS Cross-Fade Function on Chrome for Android is fully supported on all Chrome for Android versions.

CSS Cross-Fade Function on Firefox for Android is not supported on any Firefox for Android versions.

CSS Cross-Fade Function on Samsung Internet is fully supported on all Samsung Internet versions.

Browser Support for CSS Cross-Fade Function

References

Data sourced from

75
Hightooltip

Overall Browser Compatibility Score

Note:CSS Cross-Fade Function shows a browser compatibility score of 75. 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 CSS Cross-Fade Function & more

Test your website for CSS Cross-Fade Function and other web technologies. Get 100 FREE automation test minutes!

Test Now...

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 Animation
CSS :any-link selector
CSS Appearance
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
CSS Counters
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 Gradients
CSS Grid Layout (level 1)
CSS hanging-punctuation
:has() CSS relational pseudo-class
CSS Hyphenation
CSS3 image-orientation
CSS image-set
: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 line-clamp
CSS Logical Properties
CSS ::marker pseudo-element
CSS Masks
: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
CSS namespaces
CSS Nesting
selector list argument of :not()
selector list argument of :nth-child and :nth-last-child CSS pseudo-classes
CSS3 Opacity
: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 Regions
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
CSS3 selectors
::selection CSS pseudo-element
CSS Shapes Level 1
CSS Scroll Snap
CSS position:sticky
CSS Subgrid
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
CSS zoom
CSS3 attr() function for all properties
CSS3 Box-sizing
CSS3 Colors
CSS3 Cursors (original values)
CSS grab & grabbing cursors
CSS3 Cursors: zoom-in & zoom-out
CSS3 tab-size
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
Fullscreen API
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
Pointer events
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
Variable fonts
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-orient
-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
accent-color
align-content
align-items
align-self
align-tracks
all
animation
animation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timeline
animation-timing-function
appearance
aspect-ratio
backdrop-filter
backface-visibility
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-block
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
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
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
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
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-align
box-decoration-break
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
clip
clip-path
color
color-scheme
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content
content-visibility
counter-increment
counter-reset
counter-set
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-feature-settings
font-language-override
font-optical-sizing
font-palette
font-size
font-stretch
font-style
font-synthesis
font-variant
font-variant-caps
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-position
font-variation-settings
font-weight
forced-color-adjust
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-orientation
image-rendering
initial-letter
initial-letter-align
inline-size
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
isolation
justify-content
justify-items
justify-self
justify-tracks
left
letter-spacing
line-break
line-height
line-height-step
list-style
list-style-image
list-style-position
list-style-type
margin
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
margin-trim
mask
mask-border
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
masonry-auto-flow
math-depth
math-shift
math-style
max-block-size
max-height
max-inline-size
max-width
min-block-size
min-height
min-inline-size
min-width
mix-blend-mode
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
opacity
order
orphans
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-anchor
overflow-block
overflow-clip-margin
overflow-inline
overflow-wrap
overflow-x
overflow-y
overscroll-behavior
overscroll-behavior-block
overscroll-behavior-inline
overscroll-behavior-x
overscroll-behavior-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
paint-order
perspective
perspective-origin
place-content
place-items
place-self
position
print-color-adjust
quotes
resize
right
rotate
row-gap
ruby-align
ruby-position
scale
scroll-behavior
scroll-margin
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
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
shape-margin
shape-outside
tab-size
table-layout
text-align
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-indent
text-justify
text-orientation
text-rendering
text-shadow
text-transform
text-underline-offset
text-underline-position
top
touch-action
transform
transform-box
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
translate
unicode-bidi
user-modify
user-select
vertical-align
visibility
white-space
widows
width
word-spacing
writing-mode
z-index
zoom
CSS Text Box
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
CSS Grid Lanes

Did you find this page helpful?

Helpful

NotHelpful

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