Back to the CSS custom properties guide

Effects using --custom-property

The catalog contains 61 effects using --custom-property. The 61 most-viewed examples are shown below. Read the CSS custom properties guide for a complete explanation.

3D Parallax Tilthover-3d-parallax

3D Tilt Followhover-3d-tilt-follow

7 Segment Displayloader-7-segment

Spotlight Sweep Buttonbtn-spotlight-sweep

3D Zoom Tilthover-zoom-tilt-3d

Welder Sparkloader-welder-spark

OKLCH Heat Toggletoggle-oklch-heat

Dust Devilbg-dust-devil

Property Focus Ringform-property-focus

Magnetic Pull Framehover-frame-magnetic-pull

Magnetic Buttonhover-magnetic

Property Trace Framehover-property-trace

Sparks Flyhover-sparks-fly

Stars Bursthover-stars-burst

Celebration Burstloader-celebration-burst

Firecracker Poploader-firecracker-pop

Shape Explode Reformloader-shape-explode-reform

OKLCH Tone Tooltiptip-oklch-tone

OKLCH Tone Scale Badgesbadge-oklch-tone

Property Ring Badgebadge-property-ring

Birds Flyingbg-birds-flying

Conic Vortexbg-conic-vortex

OKLCH Dawnbg-oklch-dawn

Volcano Eruptionbg-volcano

Conic Halo Buttonbtn-conic-halo

Magnetic Cursor Buttonbtn-magnetic

OKLCH Pulse Buttonbtn-oklch-pulse

Foil Shimmer Cardcard-foil

Masked Gradient Cardcard-gradient-mask

Spotlight Follow Cardcard-spotlight

3D Tilt with Glarecard-tilt

OKLCH Mint Checkboxcheck-oklch-mint

OKLCH Ramp Checkboxcheck-oklch-ramp

Property Arc Checkboxcheck-property-arc

Property Sweep Checkboxcheck-property-sweep

Color Swatch Pickerform-input-color-swatch

OKLCH Field Statesform-oklch-field

BG Spotlight Revealhover-bg-spotlight-reveal

Confetti Bursthover-confetti-burst

Firework Bursthover-firework-burst

3D Tilt Edge Framehover-frame-3d-tilt-edge

Spotlight Cursor Maskhover-mask-spotlight-cursor

OKLCH Lift Tilehover-oklch-lift

Cursor Spotlighthover-spotlight

Spotlight Cursorhover-spotlight-cursor

Conic Progress Loaderloader-conic-progress

Fireworks Burstloader-fireworks-burst

Flower Bloomloader-flower-bloom

Jackpot Burstloader-jackpot-burst

Octopus Armsloader-octopus-arm

Sparkler Burnloader-sparkler-burn

Iris Aperture Spin Navnav-iris-aperture-spin

OKLCH Menu Barnav-oklch-menu

Circular Orbit Menunav-orbit-circular-menu

Planet Rotation Menunav-orbit-planet-rotate

Radial Burst Menunav-orbit-radial-burst

Ring Spin Menunav-orbit-ring-spin

Shutter Blade Close Navnav-shutter-blade-close

Shutter Blade Open Navnav-shutter-blade-open

Rotating Gradient Texttext-gradient-property

Property Glow Toggletoggle-property-glow

Continue exploring

CSS custom properties guide All guides CSS reference