Live preview Backgrounds
Masked Halftone
A dot matrix is masked with a gradient so the pattern fades out toward one corner.
#mask CSS effects
36 free, pure-CSS effects match the "mask" tag. Each is copy-ready and needs no library or build step.
Live preview Hover
Property Trace Frame
Hover starts a registered angle animating, so the gradient outline runs the perimeter.
Live preview Marquees
Obsidian Credits Roll
Role and name pairs scroll upward like the closing credits of a short film.
Live preview Sliders
Bloom Vapor Slider
A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.
Live preview Avatars
Coil Two Tone Conic Frame
A masked conic ring alternates two tones and reverses direction while hovered.
Live preview Avatars
Cove Sliding Avatar Strip
A masked horizontal strip scrolls member chips endlessly and pauses on hover.
Live preview Avatars
Verge Circle In Square Mask
A circular clip inside a square plate widens on hover until it fills the corners.
Live preview Cards
Masked Gradient Card
An animated angle drives a gradient that is masked to a one pixel border ring.
Live preview Marquees
Arc Fade Wave
A wave of transparency drifts across the panel independently of the sliding caption.
Live preview Marquees
Basalt Fade Edge
An extreme edge mask leaves only the middle third legible as the caption drifts.
Live preview Marquees
Bloom Focus Pass
Items start out of focus and sharpen one at a time as the blurred rail travels on.
Live preview Marquees
Coil Vertical Loop
Rungs enter from the top edge and leave at the bottom in an endless downward loop.
Live preview Marquees
Dash Ping Pong
The strip runs to the left, eases to a stop and then retraces its path to the right.
Live preview Marquees
Flange Plate Line
Registration plates with a blue country band file past a workshop wall rail.
Live preview Marquees
Flint Bare Line
No panel and no border at all, only quiet type sliding across the dark bench.
Live preview Marquees
Frost Ticker
A frosted glass strip carries one endless line of text with softly masked edges.
Live preview Marquees
Glide Word Wake
Each word on the moving rail lights up in turn, so the sentence wakes word by word.
Live preview Marquees
Harbor Quote Rail
Short testimonials ride past, each opened by an oversized typographic quote mark.
Live preview Marquees
Ivory Chip Rail
Rounded tag chips ride the loop, useful for topic or keyword strips.
Live preview Marquees
Lagoon Eased Surge
A steep cubic bezier makes the strip lunge forward then settle before each turn.
Live preview Marquees
Onyx Logo Belt
Wordmark tiles glide past on a dark belt, the classic partner logo strip.
Live preview Marquees
Tide Mixed Scale
Words of three different weights and sizes share one rail for an uneven rhythm.
Live preview Marquees
Tundra Credential Belt
Certification badges with tick marks pass by like an accreditation footer strip.
Live preview Marquees
Valve Crypto Tape
Round token badges lead each pair as the quote tape drifts across a terminal strip.
Live preview Progress
Flint Orbit Progress
A slim conic ring with the percentage printed at its centre and a slow pulsing halo.
Live preview Progress
Granite Gauge Progress
A half circle gauge built from a conic gradient anchored at the bottom centre of the box.
Live preview Progress
Harbor Dual Progress
Two concentric rings carry two different metrics with a colour matched key column beside them.
Live preview Progress
Marble Ring Progress
A thick conic gradient ring cut out with a mask, holding a static seventy two percent sweep.
Live preview Progress
Mauve Quiver Progress
An organic ring holds the value arc while its outline morphs and breathes on a slow cycle.
Live preview Progress
Neon Halo Progress
A vaporwave ring in magenta and cyan wraps a slatted retro sun that carries the percentage.
Live preview Progress
Obsidian Dash Progress
A dashed ring made by masking a conic gradient with a repeating conic pattern of ticks.
Live preview Progress
Pylon Cogwheel Progress
A toothed wheel turns against a smaller counter rotating one while a ring holds the value.
Live preview Progress
Ridge Rings Progress
Three nested activity rings track move, burn and stand goals inside one compact dial.
Live preview Progress
Willow Halo Progress
A hairline gradient halo turns forever around a static value arc that holds forty six percent.
Live preview Sliders
Lull Halftone Slider
A print style dot screen fills the open rail and fades out across the plate above it.
Live preview Sliders
Wander Deco Slider
Gold hairlines rule a lacquered black plate with a faceted lozenge riding the gilt rail.