Back to the blend modes guide

Effects using mix-blend-mode

The catalog contains 110 effects using mix-blend-mode. The 96 most-viewed examples are shown below. Read the blend modes guide for a complete explanation.

Thin Film Interferencebg-thin-film-interference

Abalone Nacrebg-abalone-shell-nacre

Beetle Wing Iridescencebg-beetle-wing-iridescent

Dichroic Glassbg-dichroic-glass

Spiral Galaxybg-galaxy

Gradient Shiftbg-gradient-shift

Argyle Diamondbg-argyle

Light Causticsbg-caustics

Conic Gradient Spinbg-conic-spin

Dance Floor Discobg-dance-floor-disco

Electric Guitar Shredbg-electric-guitar-shred

Kaleidoscope 6bg-kaleidoscope-6

Oil Slickbg-oil-slick

Oil on Waterbg-oil-water

Plasma Fieldbg-plasma

Swirling Portalbg-portal

Drifting Smokebg-smoke

Quantum Superpositionbg-superposition-blend

Dispersion Rainbowhover-dispersion-rainbow

Duotone Red Bluehover-duotone-red-blue

Mosaic Tile Fliphover-mosaic-flip

RGB Channel Splithover-rgb-split

Tint Yellowhover-tint-yellow

Drift Light Leak Tabstab-drift-leak

Brick Mortartext-brick-mortar

Cusp Expiry Alertalert-cusp-expiry

Echo Overlapping Initials Plateava-echo-overlap

Animated Stripesbg-animated-stripes

Anodized Titaniumbg-anodized-titanium-rainbow

Green Aurora Borealisbg-aurora-borealis-green

Violet Aurorabg-aurora-borealis-violet

Aurora Wavesbg-aurora-waves

Band Stage Spotlightsbg-band-stage-spotlights

Bleachers Crowdbg-bleachers-crowd-cheer

Bokeh Circlesbg-bokeh

Browning Toastbg-bread-toast-brown

Pool Causticsbg-caustics-pool

Chromatic Aberrationbg-chromatic-aberration-rgb

Concert Stage Lightsbg-concert-lights

Cyberpunk Neon Rainbg-cyberpunk-rain-neon

Datamoshbg-datamosh-compress

Digital Glitchbg-digital-glitch-pixel

Dye Spiralbg-dye-spiral

Energy Fieldbg-energy-field

Fluid Artbg-fluid-art

Mixed Fluidbg-fluid-mix

Gingham Checkbg-gingham

Forest Glade Sunbeambg-glade-sunbeam

Gradient Riverbg-gradient-river

Heat Hazebg-haze-heat

Hologram Flickerbg-hologram-flicker

Holographic Foilbg-hologram-shimmer-foil

Holographic Foilbg-holographic-foil

Iridescent Pearlbg-iridescent-pearl-shine

Iridescent Shellbg-iridescent-shell

Ivy Vinesbg-ivy-vines

Kaleidoscopebg-kaleidoscope

Kente Cloth Weavebg-kente-cloth-weave

Anatolian Kilimbg-kilim-anatolian

Lava Flowbg-lava-flow

Animated Mesh Gradientbg-mesh-gradient

Colorful Nebulabg-nebula

Neon Flicker Signbg-neon-flicker-sign

Noise Texture Overlaybg-noise-overlay

Oil in Waterbg-oil-in-water

Pixel Sortbg-pixel-sort-effect

Plaid Weavebg-plaid

Plasma Fieldbg-plasma-field

Plasma Swirlbg-plasma-swirl

Polarized Lightbg-polarized-light-spectrum

Prism Lightbg-prism-light

Prismatic Shimmerbg-prismatic-shimmer

Psychedelic 60sbg-psychedelic-60s-vibrant

Pulsar Lighthousebg-pulsar-lighthouse

Flowing Ribbonsbg-ribbons

Rock Concert Lightsbg-rock-concert-lights

Smoke Trailbg-smoke-trail

Solstice Noonbg-solstice-noon

Spotlight Pairbg-spotlight-pair

Gothic Stained Glassbg-stained-glass-gothic

Art Nouveau Glassbg-stained-glass-nouveau

String Theorybg-string-theory-vibration

Summer Heat Shimmerbg-summer-heat

Sunrise Burstbg-sunrise-burst

Tartan Plaidbg-tartan

Triangle Prismbg-triangle-prism

Underwater Causticsbg-underwater

Verdigris Greenbg-verdigris-green

Yagasuri Arrowbg-yagasuri-arrow

Zigzag Wavebg-zigzag-wave

Holographic Shimmer Buttonbtn-holographic

Foil Shimmer Cardcard-foil

Holographic Cardcard-holo

Dispersion Spectrumhover-dispersion-spectrum

Duotone Cyan Magentahover-duotone-cyan-magenta

Duotone Green Orangehover-duotone-green-orange

Continue exploring

blend modes guide All guides CSS reference