CSS Knob Widget with Range Slider
A css knob widget with range slider built with modern frontend techniques for responsive and reusable UI.
Calc()
40 snippetsBrowse calc() examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-calc
Snippets(40)
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.
Multi-Card Spotlight EffectA multi-card spotlight effect built with modern frontend techniques for responsive and reusable UI.
ProgressA progress 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.
Fancy Image Hover Effects with Splitting.jsA fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
Interactive Drag-and-Drop Jigsaw PuzzleA interactive drag-and-drop jigsaw puzzle built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSSDifficulty
AdvancedBrowser support
Chrome 84+, Edge 84+, Firefox 90+, Safari 15.4+Features
Zero JS, Geometric Masking, State Retention
Digital-Analog Dial ClockA digital-analog dial clock built with modern frontend techniques for responsive and reusable UI.
Slingshot Elastic Stretch ToggleA slingshot elastic stretch toggle built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 15.4+Features
Elastic Motion, Viewport Stretching, State Detection
CSS Triangles with pow() and sqrt()A css triangles with pow() and sqrt() built with modern frontend techniques for responsive and reusable UI.
- Wheel Timeline. Pure CSS
A wheel timeline. pure css built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
AdvancedFeatures
No JavaScript, Radial Layout, CSS State ManagementResponsive
Yes 
Neumorphic LoaderA neumorphic loader built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTML, JavaScriptDifficulty
IntermediateFeatures
Neumorphism, Dynamic Progress, 3D Effect- 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 
Fancy Corner Decoration for ImagesA fancy corner decoration for images built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLFeatures
Custom Properties, CSS Masking, Conic GradientResponsive
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
Product Plan Cards with CSS RibbonsA product plan cards with css ribbons built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Grid, CSS Custom Properties, Clip-pathDifficulty
IntermediateFeatures
No JavaScript, Pure CSS Ribbons, ThemableResponsive
Yes
Animated SVG Alignment ToolbarA animated svg alignment toolbar 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
Micro-interactions, SVG Animation, Dark ModeResponsive
Yes- Hover/Focus Effect For Flat Burron
A hover/focus effect for flat burron built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
IntermediateFeatures
Hover Effect, Focus State, CSS AnimationsResponsive
Yes 
Merging Pill Filter ButtonsA merging pill filter buttons built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, BabelDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 50+, Safari 10+Features
Visual Merging, Adjacent Sibling Selector, Negative Margins, Fluid ScalingResponsive
Yes
Soft Button StylingA soft button styling built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Skeuomorphism, 3D Effects, Custom GradientsResponsive
Yes
Wavy Image GalleryA wavy image gallery built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
css-masking, interlocking-shapes, custom-propertiesResponsive
Yes
Scalable CSS Radial Gradient PatternA scalable css radial gradient pattern built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
intermediateFeatures
Pure CSS, Scalable, Variable-drivenResponsive
Yes
CSS Blockquote with Gradient Drop CapA css blockquote with gradient drop cap built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Drop Cap, Gradient Backgrounds, Responsive TypographyResponsive
Yes
Fancy Hover Effect on AvatarA fancy hover effect on avatar built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
beginnerFeatures
Hover Animation, CSS VariablesResponsive
Yes
Interactive Radial Image CarouselA interactive radial image carousel built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 119+, Edge 119+, Firefox (partial), Safari 26.2+Features
CSS Motion Path, Sibling Targeting, Spring Physics, Pure CSSResponsive
Yes
Scroll-Driven Masonry RevealA scroll-driven masonry reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 115+, Edge 115+, Safari 26+, Firefox (flag/polyfill)Features
Scroll Triggered, Staggered Entrance, Responsive Grid, Reduced MotionResponsive
Yes
Cosmic 3D Galaxy ButtonA cosmic 3d galaxy button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
3D Rotation, Particle System, State-Driven StylingResponsive
Yes
Glowing Border Trace ButtonA glowing border trace button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 78+, Safari 14+Features
SVG Tracing, Dynamic Radius, Focus StatesResponsive
Yes
Pure CSS Animated Coffee Cup LoaderA pure css animated coffee cup loader built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 88+, Edge 88+, Firefox 84+, Safari 14+Features
Squash & Stretch, Path Morphing, Dark ModeResponsive
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
CSS CubeA css cube built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SCSSDifficulty
advancedFeatures
3D Transforms, Isometric View, Dark Mode, No-JS Theme SwitchingResponsive
Yes
Interactive Card Glow EffectA interactive card glow effect built with modern frontend techniques for responsive and reusable UI.
Technologies
React, CSS Variables, Radial GradientDifficulty
IntermediateFeatures
Mouse-tracking glow, Interactive spotlight, 3D effectsResponsive
Yes
Vertical Original vs. Negative Card (Hover and Drag)A vertical original vs. negative card (hover and drag) built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS blend-modes, CSS 3D transforms, calc()Features
draggable slider, image comparison, negative effect, hover interactionResponsive
Yes
Bouncy Digital Block ClockA bouncy digital block clock built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 12+Features
Bouncing Animation, Rolling Digits, Dark Mode, Responsive ScalingResponsive
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
Pure CSS Animated Details AccordionA pure css animated details accordion built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 129+, Edge 129+Features
Smooth Height Transition, Zero JavaScript, Discrete Animations, Exclusive ExpansionResponsive
Yes
Range Slider with Value and RulerA range slider with value and ruler built with modern frontend techniques for responsive and reusable UI.
Technologies
html, cssDifficulty
intermediateFeatures
value indicator, visual ruler scale, custom tick marksResponsive
Yes