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)
- CSS Knob Widget with Range Slider
- Circular Battery Meter
A circular battery meter built with modern frontend techniques for responsive and reusable UI.
- Magnetic Links
A magnetic links built with modern frontend techniques for responsive and reusable UI.
- Multi-Card Spotlight Effect
A multi-card spotlight effect built with modern frontend techniques for responsive and reusable UI.
- Progress
A progress built with modern frontend techniques for responsive and reusable UI.
- Scrambling Letter Effect on Hover
A scrambling letter effect on hover built with modern frontend techniques for responsive and reusable UI.
- Segmented/Pill Radio Input
A segmented/pill radio input built with modern frontend techniques for responsive and reusable UI.
- Text Reveal with Splitting.js
A text reveal with splitting.js built with modern frontend techniques for responsive and reusable UI.
- Fancy Image Hover Effects with Splitting.js
A fancy image hover effects with splitting.js built with modern frontend techniques for responsive and reusable UI.
- Interactive Drag-and-Drop Jigsaw Puzzle
A 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 Clock
A digital-analog dial clock built with modern frontend techniques for responsive and reusable UI.
- Slingshot Elastic Stretch Toggle
A 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 Loader
A 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 Images
A 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 Cards
A 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 Ribbons
A 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 Toolbar
A 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 Buttons
A 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 Styling
A soft button styling built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Skeuomorphism, 3D Effects, Custom GradientsResponsive
Yes - Wavy Image Gallery
A 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 Pattern
A 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 Cap
A 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 Avatar
A 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 Carousel
A 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 Reveal
A 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 Button
A 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 Button
A 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 Loader
A 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 Scramble
A 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 Cube
A 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 Effect
A 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 Clock
A 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 Loader
A 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 Accordion
A 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 Ruler
A 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




































