33 CSS @property Examples
This collection is your guide to @property, the game-changing CSS Houdini feature that unlocks previously impossible animations. By registering a data type for a CSS variable, it enables the browser to smoothly interpolate its values. This allows for building performant animated counters using the counter() function, or dynamic circular progress bars with conic-gradient. All complex logic is moved from JavaScript into the CSS engine, ensuring smoothness and clean code.
Last updated:
Uninvert Kitty
An interactive spotlight reveal where the cursor controls a negative mask and a physical 3D tilt effect.
Invert Radius Shape with Cool Hover Effect
A sophisticated hover effect utilizing CSS Houdini to animate a complex image mask.
Grainy Gradient Text with CSS Houdini
A holographic typography effect achieved through CSS Houdini properties to animate complex gradient coordinates. The text features a grainy texture generated by SVG noise filters and blended with conic and radial gradients using background-blend-mode: color-burn, creating a shimmering, fluid color movement clipped directly to the character shapes.
Minimalist CSS Toggle Switch
This is a pure CSS toggle switch, utilizing :before and :after pseudo-elements to render the track and thumb. It demonstrates effective state management via the :checked pseudo-selector and smooth transitions on all elements for a highly responsive and clean effect.
Skeuomorphic Like Button
An advanced “Like” button micro-animation based on CSS @property, where custom variables are used to animate the numbers and the icon.
Cursor Following Halftone Rings with CSS @property
A cursor effect creating dynamic halftone rings is implemented using CSS Custom Properties and transition properties for smooth mouse-following, requiring minimal JavaScript to update coordinates.
High-Performance CSS Countdown
A high-performance, CSS-driven countdown showcasing variable-based theming and complex keyframe animations, where a small JS utility only activates the final celebratory effect.
Noisy Image Gallery Navigation with Custom JS
An interactive horizontal gallery featuring non-standard click-based navigation on side images. The main feature is Vanilla JS tracking clicks and mousemove to dynamically calculate and apply CSS transformations for centering the selected element.
Glass / Gel Style Range Slider
Experience a fluid, animated Range Slider with four vibrant, themeable styles (Rainbow, Ice, Sunset, Slime), powered by Svelte and cutting-edge CSS-only effects.
Multiple Popovers with Anchor Positioning and @property
An advanced UI flow demonstrating the power of the native HTML Popover API for sequential dialogs, utilizing the toggle event and hidePopover() in Vanilla JS to create smooth, zero-dependency popover chaining with custom spring and fade CSS animations.
Pure CSS Loader #10/2020 - No SVG Arcs
An elegant loader built purely with CSS/SASS that leverages CSS Houdini’s @property to define and smoothly animate custom numeric properties, enabling a high-performance rotation and hue-shifting loop.
Pure CSS Loader #11/2020 - Ripples
Spectacular animated ring loader built on the advanced capabilities of CSS Houdini to define and smoothly transition custom properties, enabling complex and dynamically changing geometry via conic and radial gradients.
Color Wheel Loader using Animated Custom Properties
Advanced CSS animation utilizing ten-point delays (nth-child) to create a ripple effect and showcasing CSS Houdini capabilities for animating length and angle values.
Damped Menu Bar using CSS @property
A superb demonstration of physically accurate damped oscillation animation, achieved using a registered CSS property (@property --progress) that controls trigonometric functions within calc() to drive the elements’ 3D movement.
3D Sphere with Dynamic Shadow
This demo shows how to create a realistic 3D sphere effect using pure CSS, without SVG or 3D transformations. The effect is achieved through gradients (radial-gradient), shadows (box-shadow), pseudo-elements (::before, ::after) for highlights and shadows, and dynamic variables (@property) for animation.
Pure CSS Slideshow
A unique CSS-only image slider that uses advanced CSS properties like @property and :has() to control image transitions and UI elements. The background-position and nested radio buttons simulate a complex, fragmented image reveal effect without any JavaScript.
CSS Var Only Sidebar Toggle
This animated sidebar is built entirely with pure CSS using modern features. The key is @property for a smooth width transition and the :has() selector to track a checkbox’s state, enabling animation control without a single line of JavaScript.
Sliding Images Using Animation-timeline
This scroll-driven animation effect is built entirely with CSS Scroll-Driven Animations, using animation-timeline: scroll(). It smoothly translates and transforms elements based on scroll position, creating a dynamic and high-performance parallax effect without JavaScript.
CSS Art Panda
An elegant example of semantic markup, where every element is styled and animated using CSS. The technical foundation includes clip-path, CSS custom properties, and animated pseudo-elements for each visual layer.
Customizable HTML and CSS Select
Dive deep into modern CSS form control by styling a <select> element’s internal parts like ::picker and ::picker-icon, enhanced with a dynamic hue-rotating border animated via @property.
Earth with Pure CSS
A showcase of advanced CSS capabilities for creating stunning 2D animations. It uses CSS @property for smooth property transitions, allowing you to animate box-shadow and other elements without compromising performance.
CSS-Only Counter Demo
A pure CSS number counter leveraging CSS Houdini’s @property to animate an integer custom property.
Pure CSS Animated FF Conf Logo
A futuristic 3D data block where scrolling digital “circuits” are simulated purely in CSS by animating the background-position of linear-gradient patterns.
Animated Border Gradient Glow
An animated rainbow border effect with a neon glow, implemented using @property, conic-gradient, and SVG filters. The @keyframes animation smoothly changes the --a CSS variable, which controls the hue in the conic-gradient, creating a continuous color transition.
Scroll Mask Indicators
A modern and clean way to indicate scrollability: the “fade-to-mist” effect is implemented using mask-image and linear-gradient, while key parameters of the fade phase are precisely tuned using @property.
Pure CSS Responsive Hex Grid
An adaptive hexagonal grid without media queries, built on Container Queries, where the column count and the position of each element are calculated in CSS via complex calc() functions. The code demonstrates progressive enhancement - with a fallback to @property and a tan(atan2()) math trick to emulate division in older browsers.
Character Choose with Preview Card Animation (CSS Sprites)
A sophisticated CSS-only character selector and sprite animator inspired by Minecraft. It leverages CSS Houdini and advanced math functions to drive complex frame-by-frame sprite animations, while :has() selectors manage state changes for character selection, direction toggling, and dynamic FPS adjustment, complete with real-time stats via CSS counters.
