CSS Filters & Blend Modes Effects

Thin-film interference: one phase read by three cosines a third of a turn apart, so the hue sweeps the whole palette instead of crossfading between two ends of it.

A two-tone field resolved by an 8x8 Bayer matrix — the 1-bit look, with the dither grid pinned to layout pixels so it survives a retina screen.

Grayscale base tinted ocean with mix-blend-mode: color — hover drops back to the original.

Desaturated blue tile that regains color and pushes in when hovered.

Headline with ocean channel copies screened over it that jitter apart every few seconds.

Type set in overlay blend over a grainy ocean field, flipping to difference on hover.

Glass panel over an ocean field — hovering pulls the blur back so the backdrop sharpens.

Conic ocean tile walked through the full hue wheel by a single filter keyframe.

Dimmed ocean image with a soft-light spotlight drifting across it; hover lifts the whole frame.

Two copies of one surface at different saturations, split by a clip-path handle that slides on hover — a before/after with no second asset.

Two coloured copies drifting apart in `screen` blend, so the fringes brighten where they overlap the way a real lens split does.

False-colour heat field from stacked radial gradients under an overlay scanline grid, with a monospace readout for the instrument look.

Continuous gradient quantized into three tone steps by a multiplying repeating-gradient, the banding backing off on hover to show what was thrown away.

Sabattier effect from an inverted copy composited with lighten, which flips only the tones the original leaves dark — the partial reversal a full invert cannot give.

A heavily blurred teal-to-violet blob and its label pull into sharp focus on hover like a lens rack.

Heading set in difference blend over a drifting stripe field, so each letter inverts whatever band it happens to cross.

Two artwork plates dissolve back and forth in plus-lighter blending, so instead of the usual muddy dip in the middle the overlap adds light and the halfway frame is the brightest one; hovering pauses the dissolve wherever it stands.

Blurred band swept across the frame in `color-dodge` with the label in `overlay`, so both react to what passes beneath them.

Stacked grade, overlay grain and a radial vignette, the grain stepped in three frames so it stutters like emulsion rather than sliding.

Repeating dot mask over a gradient, the cell size growing on hover so the screen coarsens the way a print separation would.

Inverting backdrop-filter revealed by an animated inset clip, with a lit scan edge riding the boundary so the wipe reads as an instrument passing over the plate.

Letterforms pressed into the surface by one dark and one light offset shadow, the pair swapping sides on hover so the relief flips from debossed to raised.

A clip-path star whose shadow hugs its points thanks to the drop-shadow filter, lifting with a pink glow on hover.

Card holding blurred private figures that sharpen into focus on hover as the prompt underneath fades away.

Filmstrip of colour cards where touching any one of them drains the colour out of every other card and dims it, while the card under the cursor gains saturation and contrast and steps forward.

Two lime blobs that stretch and fuse together as they meet on hover, using the classic blur-plus-contrast gooey filter.

Four identical swatches showing the same two discs composited under screen, overlay, colour-dodge and exclusion.

Now-playing card that lights itself: a second copy of the artwork sits behind the first under a heavy blur and a saturation boost, so the sleeve bleeds its own colour onto the card, spreading further on hover.

Three primary discs in screen blend mode that add up to white where they overlap, and drift apart on hover.

Light photo tile that takes a two-colour gradient wash multiplied over it on hover, deepening every tone at once.

Collector card finished in holographic foil: blurred rainbow stripes composited in color-dodge over the dark stock with a hard-light sheen above them, both sliding the other way as the card is hovered so the foil appears to tilt.

A dark tile with amber and indigo blobs that flips to a light negative on hover using the invert filter with hue-rotate to keep hues stable.

An SVG turbulence noise texture blended in overlay mode over an orange gradient, growing coarser on hover.