Cursor Following Halftone Rings with CSS @property
A cursor following halftone rings with css @property built with modern frontend techniques for responsive and reusable UI.
@property
48 snippetsBrowse @property examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-property
Snippets(48)
Glass / Gel Style Range SliderA glass / gel style range slider built with modern frontend techniques for responsive and reusable UI.
Noisy Image Gallery Navigation with Custom JSA noisy image gallery navigation with custom js built with modern frontend techniques for responsive and reusable UI.
CSS Var Only Sidebar ToggleA css var only sidebar toggle built with modern frontend techniques for responsive and reusable UI.
Damped Menu Bar using CSS @propertyA damped menu bar using css @property built with modern frontend techniques for responsive and reusable UI.
Pure CSS SlideshowA pure css slideshow built with modern frontend techniques for responsive and reusable UI.
- Breathing Animation with shape()
A breathing animation with shape() built with modern frontend techniques for responsive and reusable UI.
CSS Art PandaA css art panda built with modern frontend techniques for responsive and reusable UI.
High-Performance CSS CountdownA high-performance css countdown built with modern frontend techniques for responsive and reusable UI.
- CSS-Only Counter Demo
A css-only counter demo built with modern frontend techniques for responsive and reusable UI.
Minimalist CSS Toggle SwitchA minimalist css toggle switch built with modern frontend techniques for responsive and reusable UI.
Customizable HTML and CSS SelectA customizable html and css select built with modern frontend techniques for responsive and reusable UI.
Color Wheel Loader using Animated Custom PropertiesA color wheel loader using animated custom properties built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Custom PropertiesDifficulty
intermediateFeatures
Smooth color transitions, Staggered animation delaysResponsive
Yes
Pure CSS Loader #10/2020 - No SVG ArcsA pure css loader #10/2020 - no svg arcs built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SASS, CSS HoudiniFeatures
Pure CSS, No SVG, Hue-shifting
Pure CSS Loader #11/2020 - RipplesA pure css loader #11/2020 - ripples built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Custom PropertiesDifficulty
AdvancedFeatures
Pure CSS, Animated, Hardware Accelerated- CSS Bookmark
A css bookmark built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, SVG MaskDifficulty
advancedFeatures
Checkbox Hack, Gradient Animation - Pure CSS Responsive Hex Grid
A pure css responsive hex grid built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, Container QueriesDifficulty
advancedFeatures
No Media Queries, Dynamic Calculation, Hexagonal ShapesResponsive
Yes - CSS Image Stack Cycle
A css image stack cycle built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Custom PropertiesDifficulty
advancedFeatures
3D Stacking, Automatic Cycling, Random RotationResponsive
Yes - Shuffling Effect in Pure CSS
A shuffling effect in pure css built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Grid, CSS :has()Difficulty
IntermediateFeatures
Pure CSS, No JavaScript, Animated Transitions - Character Choose with Preview Card Animation (CSS Sprites)
A character choose with preview card animation (css sprites) built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Sprites, CSS :has()Difficulty
AdvancedFeatures
Frame-by-frame animation, Directional toggling, Pixel art renderingResponsive
Yes 
Modern Container Query Product CardsA modern container query product cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 118+, Edge 118+, Firefox 128+, Safari 17.4+Features
Container Queries, CSS Scope, OKLCH Colors, Fluid TypographyResponsive
Yes
Skeuomorphic Like ButtonA skeuomorphic like button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
intermediateFeatures
skeuomorphism, micro-animations, dynamic numberingResponsive
Yes
3D Sphere with Dynamic ShadowA 3d sphere with dynamic shadow built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
intermediateFeatures
Radial Gradients, CSS Custom Properties, Animation- Pure CSS Animated FF Conf Logo
A pure css animated ff conf logo built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
AdvancedFeatures
3D Transforms, CSS Animations, Linear GradientsResponsive
Yes 
Grainy Gradient Text with CSS HoudiniA grainy gradient text with css houdini built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, SVG Filters, CSS Custom PropertiesDifficulty
AdvancedFeatures
Animated Gradients, Grainy Texture, Holographic EffectResponsive
Yes
RGB Keyboard with Dark ModeA rgb keyboard with dark mode built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS 3D, CSS VariablesDifficulty
AdvancedFeatures
RGB Animation, Dark Mode, 3D PerspectiveResponsive
Yes
Sliding Images Using Animation-timelineA sliding images using animation-timeline built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Scroll-Driven AnimationsDifficulty
IntermediateBrowser support
Requires a browser that supports the CSS animation-timeline property (e.g., Chrome 115+).Features
Parallax, Zero-JS AnimationResponsive
Yes
Stepping Feet Optical IllusionA stepping feet optical illusion built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 16.4+Features
Pseudo-elements, Keyframe Animation, Linear GradientsResponsive
Yes
Dynamic Circular Avatar GalleryA dynamic circular avatar gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 119+, Edge 119+Features
CSS Trigonometry, Hover Expansion, Dynamic MaskingResponsive
Yes- Animate Single img Gradient Glow Border With CSS + SVG Filter Enhancement
A animate single img gradient glow border with css + svg filter enhancement built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGDifficulty
IntermediateFeatures
Animated Border, Neon Glow, Rotating Gradient 
Animated Border Gradient GlowA animated border gradient glow built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGDifficulty
intermediateFeatures
Animated Gradient, Neon Glow, Custom Properties
Dynamic Neon Glow Range SliderA dynamic neon glow range slider built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 111+, Edge 111+, Firefox 113+, Safari 16.4+Features
Skeuomorphism, Dynamic Shadow Casting, CSS @property, Cross-browser Track StylingResponsive
Yes
Neon Glow Toggle SwitchA neon glow toggle switch built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 85+, Edge 85+, Firefox 128+, Safari 16.4+Features
CSS @property, Skeuomorphism, Conic-gradient Mask, Dark Mode ReadyResponsive
Yes- Scroll Mask Indicators
A scroll mask indicators built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Masking, CSS @property, Scroll-driven AnimationsDifficulty
IntermediateFeatures
Fade-to-mist effect, Dynamic scroll indicators 
Earth with Pure CSSA earth with pure css built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
AdvancedFeatures
Pure CSS Animation, Volumetric Lighting, CSS @propertyResponsive
Yes
Generative Glitch Cube ArtA generative glitch cube art built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSSDifficulty
AdvancedBrowser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+Features
Conic Gradients, CSS @property, Glitch Animation, No JavaScriptResponsive
Yes
Scroll-Driven Circular Typographic ScrambleA scroll-driven circular typographic scramble built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 115+, Edge 115+Features
Scroll Timeline, CSS Math Functions, Pure CSS, Radial LayoutResponsive
Yes
Interactive 3D Flip Book GalleryA interactive 3d flip book gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+Features
3D Perspective, Page Turning, Stacked Layout, Auto-ClosureResponsive
Yes
Multiple Popovers with Anchor Positioning and @propertyA multiple popovers with anchor positioning and @property built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Anchor Positioning, Popover API, CSS @property, Vanilla JSDifficulty
AdvancedFeatures
Zero-dependency, Hardware-accelerated animations, Native browser anchoringResponsive
Yes
Mouse-Reactive Iridescent ButtonA mouse-reactive iridescent button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 122+, Edge 122+, Firefox 128+, Safari 16.4+Features
Mouse Tracking, Iridescent Glow, CSS @property, Display-P3 ColorsResponsive
Yes
Beveled Corner Glow CardsA beveled corner glow cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 120+, Edge 120+, Firefox 120+, Safari 17+Features
CSS Corner Shape, Houdini (@property), CSS Masks, Progressive EnhancementResponsive
Yes
Cinematic Black Magic Volume KnobA cinematic black magic volume knob built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 118+, Edge 118+, Firefox 120+, Safari 17.4+ (Partial)Features
CSS @property, SVG Filters, Particle SystemResponsive
Yes
Holographic 3D Interactive CardA holographic 3d interactive card built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+Features
3D Perspective, Pointer Tracking, Iridescent Gradients, Holographic ShimmerResponsive
Yes
Invert Radius Shape with Cool Hover EffectA invert radius shape with cool hover effect built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS VariablesDifficulty
advancedFeatures
Animated Mask, Interactive Shape, Cursor Tracking
Pure CSS Synthwave 80s AnimationA pure css synthwave 80s animation built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Infinite Grid, Mask Animations, Perspective 3D, Audio IntegrationResponsive
Yes
Synchronized Pure CSS Skeleton LoaderA synchronized pure css skeleton loader built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 111+, Edge 111+, Safari 16.4+, Firefox 128+Features
Global Synchronization, Viewport-aware speed, No-JS Math, Light/Dark ModeResponsive
Yes
Trigonometric 3D Orbit GalleryA trigonometric 3d orbit gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSSDifficulty
AdvancedBrowser support
Chrome 111+, Edge 111+, Safari 16.4+, Firefox 113+Features
CSS Trigonometry, Houdini API (@property), 3D Transforms, Parametric AnimationResponsive
Yes
Uninvert KittyA uninvert kitty built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Variables, 3D TransformsDifficulty
AdvancedFeatures
Cursor tracking, Spotlight reveal, 3D Tilt