Animated React Toggle Like Button
A animated react toggle like button built with modern frontend techniques for responsive and reusable UI.
Custom properties (variables)
284 snippetsBrowse custom properties (variables) examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-custom-property-variables-examples
Snippets(284)
Directionally Aware CSS Buttons with ReactA directionally aware css buttons with react built with modern frontend techniques for responsive and reusable UI.
Interactive Desktop and Mobile Card ComponentA interactive desktop and mobile card component built with modern frontend techniques for responsive and reusable UI.
Pure CSS Dial ButtonA pure css dial button built with modern frontend techniques for responsive and reusable UI.
React 3D Carousel with CSS VariablesA react 3d carousel with css variables built with modern frontend techniques for responsive and reusable UI.
React Component: Interactive Image Grid FlipperA react component: interactive image grid flipper built with modern frontend techniques for responsive and reusable UI.
React Material Design CheckboxA react material design checkbox built with modern frontend techniques for responsive and reusable UI.
React Minimal Glow CardsA react minimal glow cards built with modern frontend techniques for responsive and reusable UI.
React Simple CheckboxA react simple checkbox built with modern frontend techniques for responsive and reusable UI.
Responsive CSS Powered Parallax with React and GSAPA responsive css powered parallax with react and gsap built with modern frontend techniques for responsive and reusable UI.
Smart Home Temperature & Light SliderA smart home temperature & light slider built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 15+, Firefox 43+, Safari 10+Features
Dual Mode Toggle, Dynamic Coloring, CSS Variables, Custom Range Input
Vue.js Read More ExpansionA vue.js read more expansion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 15+, Firefox 43+, Safari 9.1+Features
Dynamic Height Calculation, Smooth Transition, Gradient Fade
Collapsible React Sidebar with Dark ModeA collapsible react sidebar with dark mode built with modern frontend techniques for responsive and reusable UI.
Little GalleryA little gallery built with modern frontend techniques for responsive and reusable UI.
Bar Chart in CSS Grid + VariablesA bar chart in css grid + variables built with modern frontend techniques for responsive and reusable UI.
- CSS Custom Pproperty Hover Effects
A css custom pproperty hover effects built with modern frontend techniques for responsive and reusable UI.
- Hover Effect Using CSS Variables
A hover effect using css variables built with modern frontend techniques for responsive and reusable UI.
- Morphing Fullscreen Navigation Menu [~60fps animation]
A morphing fullscreen navigation menu [~60fps animation] built with modern frontend techniques for responsive and reusable UI.
- Scroll and Morph
A scroll and morph built with modern frontend techniques for responsive and reusable UI.
- Single Div Accordion (Animated with CSS Variables)
A single div accordion (animated with css variables) built with modern frontend techniques for responsive and reusable UI.
- Splitting.js: CSS Vars for Split Words & Chars
A splitting.js: css vars for split words & chars built with modern frontend techniques for responsive and reusable UI.
- Spring Physics with CSS Variables
A spring physics with css variables built with modern frontend techniques for responsive and reusable UI.
- Sunset/Sunrise Animation with CSS Variables
A sunset/sunrise animation with css variables built with modern frontend techniques for responsive and reusable UI.
- Thermostat with Form Elements & CSS Variables
A thermostat with form elements & css variables built with modern frontend techniques for responsive and reusable UI.
React HSL Color SliderA react hsl color slider built with modern frontend techniques for responsive and reusable UI.
Vanilla JavaScript Minesweeper GameA vanilla javascript minesweeper game built with modern frontend techniques for responsive and reusable UI.
Nest Thermostat UI with Draggable.js and CanvasA nest thermostat ui with draggable.js and canvas built with modern frontend techniques for responsive and reusable UI.
Airplane Mode Toggle SwitchA airplane mode toggle switch built with modern frontend techniques for responsive and reusable UI.
Toggle Animation with CSS & State Machines!A toggle animation with css & state machines! built with modern frontend techniques for responsive and reusable UI.
Timeline Slider ConceptA timeline slider concept built with modern frontend techniques for responsive and reusable UI.
Tab Bar Animation with MorphSVGA tab bar animation with morphsvg built with modern frontend techniques for responsive and reusable UI.
Skeuomorphic StopwatchA skeuomorphic stopwatch built with modern frontend techniques for responsive and reusable UI.
Halloween Ghost Carousel with Swiper.jsA halloween ghost carousel with swiper.js built with modern frontend techniques for responsive and reusable UI.
UI Action Menu Dropdown DesignA ui action menu dropdown design built with modern frontend techniques for responsive and reusable UI.
Oreo, Smash, Donuts, etc.A oreo, smash, donuts, etc. built with modern frontend techniques for responsive and reusable UI.
Advanced CSS Balance SlidersA advanced css balance sliders built with modern frontend techniques for responsive and reusable UI.
Minimalist ThermostatA minimalist thermostat built with modern frontend techniques for responsive and reusable UI.
Range Slider with Sliding ValueA range slider with sliding value built with modern frontend techniques for responsive and reusable UI.
Slider with Animated IconsA slider with animated icons built with modern frontend techniques for responsive and reusable UI.
Animated CSS Progress BarA animated css progress bar built with modern frontend techniques for responsive and reusable UI.
Interactive Spotlight EffectA interactive spotlight effect built with modern frontend techniques for responsive and reusable UI.
Light and Shadow Mouse TrackingA light and shadow mouse tracking built with modern frontend techniques for responsive and reusable UI.
Animated Slider with Morphing EffectsA animated slider with morphing effects built with modern frontend techniques for responsive and reusable UI.
Wriggly Squiggly NavigationA wriggly squiggly navigation built with modern frontend techniques for responsive and reusable UI.
Magnifying Glass Image ZoomerA magnifying glass image zoomer built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, Pug, StylusDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Pointer Tracking, Wheel Zooming, Edge Detection
CSS Glitchy Text Reveal with Splitting.jsA css glitchy text reveal with splitting.js built with modern frontend techniques for responsive and reusable UI.
Our Best Friends Gallery ZoomA our best friends gallery zoom built with modern frontend techniques for responsive and reusable UI.
Password Error and Success AnimationA password error and success animation built with modern frontend techniques for responsive and reusable UI.
Yet Another SliderA yet another slider built with modern frontend techniques for responsive and reusable UI.
Complementaries - Interactive Palette PickerA complementaries - interactive palette picker built with modern frontend techniques for responsive and reusable UI.
Color Palette GeneratorA color palette generator built with modern frontend techniques for responsive and reusable UI.
CSS Clock (Braun x Paul Smith Style)A css clock (braun x paul smith style) built with modern frontend techniques for responsive and reusable UI.
Carousel with Drag and Wheel InputA carousel with drag and wheel input built with modern frontend techniques for responsive and reusable UI.
Multi-Card Glow HoverA multi-card glow hover built with modern frontend techniques for responsive and reusable UI.
Add to Cart ButtonA add to cart button built with modern frontend techniques for responsive and reusable UI.
Animated Like Button with GSAPA animated like button with gsap built with modern frontend techniques for responsive and reusable UI.
Material 3 Floating Action Button (FAB)A material 3 floating action button (fab) built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 15+, Firefox 43+, Safari 10+Features
Material 3 Design, Morphing Animation, CSS Variables, State Management
Cinematic Hero Section In-View AnimationA cinematic hero section in-view animation built with modern frontend techniques for responsive and reusable UI.
Bongo Cat Codes #2: JammingA bongo cat codes #2: jamming built with modern frontend techniques for responsive and reusable UI.
Theme ClockA theme clock built with modern frontend techniques for responsive and reusable UI.
Animated Bottom Tab Bar with CSS TransitionsA animated bottom tab bar with css transitions built with modern frontend techniques for responsive and reusable UI.
Ghost Ships Sticky HeaderA ghost ships sticky header built with modern frontend techniques for responsive and reusable UI.
Sliding List with Scroll-Driven AnimationsA sliding list with scroll-driven animations built with modern frontend techniques for responsive and reusable UI.
Split Staggered Reveal CardsA split staggered reveal cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 87+, Safari 14+Features
Text Splitting, Staggered Animation, Pseudo-elements, Keyboard Accessible
GSAP Mask Mouse EffectA gsap mask mouse effect built with modern frontend techniques for responsive and reusable UI.
React Color Gradient PaletteA react color gradient palette built with modern frontend techniques for responsive and reusable UI.
Tri-State Theme Toggle with light-dark()A tri-state theme toggle with light-dark() built with modern frontend techniques for responsive and reusable UI.
Kinetic 144-Clock Digital DisplayA kinetic 144-clock digital display built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 12+Features
Kinetic Typography, CSS Variables, Angle Normalization, React State Management
Adaptive Thumbnail CarouselA adaptive thumbnail carousel built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 69+, Edge 79+, Firefox 63+, Safari 13.1+Features
Responsive Design, Scroll Snapping, Keyboard Navigation, Thumbnail Preview
Semantic Custom Progress Bar KitA semantic custom progress bar kit built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Semantic Hydration, Gradient Fills, Striped Patterns, CSS Variables
Interactive Gooey ButtonsA interactive gooey buttons built with modern frontend techniques for responsive and reusable UI.
Asymmetric SVG Mask Grid GalleryA asymmetric svg mask grid gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 120+, Edge 120+, Firefox 53+, Safari 15.4+Features
SVG Masks, Grid Areas, Lightbox Modal
Cinematic Context-Aware Video CursorA cinematic context-aware video cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Context Awareness, Pointer Tracking, Logic-less CSS State
Hover Image Reveal Custom CursorA hover image reveal custom cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 16+, Firefox 54+, Safari 10.1+Features
Custom Cursor, Image Reveal, State Delegation, Blend Modes
Odometer Number CounterA odometer number counter built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 90+, Edge 90+, Firefox 88+, Safari 15+Features
Odometer Effect, CSS Custom Easing, 3D Explode View, dat.gui Integration
Scroll-Driven Jigsaw Puzzle AssemblerA scroll-driven jigsaw puzzle assembler built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, Sass, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Scroll-Driven Animation, Drag-and-Drop Upload, Dynamic Math Calculations, Responsive Layout
Clip-Path Shapes ExplorerA clip-path shapes explorer built with modern frontend techniques for responsive and reusable UI.
Technologies
Stylus, BabelDifficulty
IntermediateBrowser support
Chrome 55+, Edge 79+, Firefox 54+, Safari 10.1+Features
Clip-path Generator, Syntax Highlighting, Dynamic Theming, Responsive UI
GSAP ScrollTrigger List ExpansionA gsap scrolltrigger list expansion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
ScrollTrigger, Card Stack Effect, CSS Clip-path, Responsive Mobile Mockup
High Five ButtonA high five button built with modern frontend techniques for responsive and reusable UI.
Kinetic clip-path Text RotatorA kinetic clip-path text rotator built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
Kinetic Typography, Clip-Path Masking, Infinite Loop, High Performance
Magnifying Glass NavigationA magnifying glass navigation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 55+, Edge 79+, Firefox 54+, Safari 10+Features
Clip-Path Animation, Neumorphism, State Management
Slider #2A slider #2 built with modern frontend techniques for responsive and reusable UI.
Staggered Panel Curtain MenuA staggered panel curtain menu built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, BabelDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Staggered Panels, Variable Fonts, Clip-path Masking, GSAP Timeline
Dynamic Variable Multi-Theme DashboardA dynamic variable multi-theme dashboard built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 84+, Safari 14.1+Features
Live CSS Variable Mapping, Animated Icon Reel, Swatch Previews, Dynamic Layout Selection
CSS Knob Widget with Range SliderA css knob widget with range slider built with modern frontend techniques for responsive and reusable UI.
Circular Battery MeterA circular battery meter built with modern frontend techniques for responsive and reusable UI.
Magnetic LinksA magnetic links built with modern frontend techniques for responsive and reusable UI.
Scrambling Letter Effect on HoverA scrambling letter effect on hover built with modern frontend techniques for responsive and reusable UI.
Segmented/Pill Radio InputA segmented/pill radio input built with modern frontend techniques for responsive and reusable UI.
Text Reveal with Splitting.jsA text reveal with splitting.js built with modern frontend techniques for responsive and reusable UI.
Button with Animated GradientA button with animated gradient built with modern frontend techniques for responsive and reusable UI.
Neumorphic Dark Mode CalculatorA neumorphic dark mode calculator built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Neumorphism, Dark Mode Toggle, Copy to Clipboard, Vanilla JS Math
Neumorphic Drag Dial ThermostatA neumorphic drag dial thermostat built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Safari 11+, Firefox 55+, Edge 79+Features
Neumorphism, Draggable Dial, Dynamic Gradients, Keyboard Accessible
Color Clipping Effect with CSS Gradients and GSAPA color clipping effect with css gradients and gsap built with modern frontend techniques for responsive and reusable UI.
Hyperplexed Evervault Card Hover EffectA hyperplexed evervault card hover effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Dynamic Masking, Random Character String, Mouse Tracking, Mix-blend-mode
Noisy Image Gallery Navigation with Custom JSA noisy image gallery navigation with custom js built with modern frontend techniques for responsive and reusable UI.
Fancy Image Hover Effects with Splitting.jsA fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
TicketA ticket built with modern frontend techniques for responsive and reusable UI.
Action Bar - 'Follow the Leader' Dynamic IndicatorA action bar - 'follow the leader' dynamic indicator built with modern frontend techniques for responsive and reusable UI.
Action Bar - 'Follow the Leader' Magnifying LensA action bar - 'follow the leader' magnifying lens built with modern frontend techniques for responsive and reusable UI.
Page 1 of 3