31 CSS calc() Examples

This Scroll-Driven Masonry Reveal creates a playful, tactile experience where content cards appear to be “dealt” onto the screen as the user scrolls. By leveraging the native CSS Scroll-driven Animations API, it achieves smooth, main-thread-free entrance effects without a single line of JavaScript. The layout adapts intelligently from 2 to 8 columns, making it a robust solution for image galleries or blog archives.

This Bouncy Digital Block Clock transforms a standard time display into a playful, tactile UI element. It utilizes a split-digit technique where numbers “roll” into place while their container physically bounces, adding weight and character to every second that passes. The component is fully responsive, supports system dark mode automatically, and ensures accessibility via dynamic ARIA labels.

This Merging Pill Filter Button set introduces a fluid, organic feel to standard multi-select inputs. Instead of keeping active items isolated, this component visually fuses adjacent selected buttons into a single continuous shape. It’s an excellent choice for music apps, filtering systems, or any UI where categories are related and grouping them visually adds context.

This Pure CSS Animated Details Accordion utilizes cutting-edge CSS functions to achieve smooth height transitions on native HTML elements without a single line of JavaScript. By leveraging the revolutionary calc-size() function and the ::details-content pseudo-element, it finally solves the age-old problem of animating from height: 0 to height: auto.

This Synchronized Pure CSS Skeleton Loader pushes the boundaries of modern CSS by creating a unified “shimmer” effect that sweeps across multiple disparate elements simultaneously. Unlike standard skeleton loaders that animate each block independently, this implementation ensures a single, globally aligned gradient flow using advanced CSS math and Houdini properties.

A pure CSS “pop-out” avatar effect utilizing CSS variables to orchestrate a scale transition.

Images appear as jigsaw puzzle pieces with interlocking edges that can visually fit together.

A pure CSS isometric text cube constructed via 3D transforms and trigonometry-based SCSS calculations. It features dynamic styling controlled by :has() and CSS variables, allowing for runtime theme switching (tritone/monotone/dim) and dark mode adaptation without JavaScript logic.

A tactile Neumorphic progress indicator where JavaScript drives the animation state by updating a custom property --progress. The visual logic relies on CSS conic-gradient utilizing calculated color stops to dynamically render the filling arc, while complex layered box-shadow creates a soft, extruded 3D aesthetic.

A collection of skeuomorphic buttons rendered entirely in CSS using complex gradient layering and calc()-driven geometry variables.

A minimalist dashboard visualizing the passage of time across multiple scales (minute to year) via animated progress bars, updated in real-time.

A sophisticated magnetic navigation menu that uses JavaScript to map mouse proximity to CSS variables, driving smooth translations via translate. It features a configurable “follow” effect where a background pseudo-element glides between items based on bounding box coordinates calculated on hover.

On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.

An interactive card that reveals a negative version of the image on hover, with a draggable slider to compare the two versions, utilizing CSS blend modes and 3D transforms.

A sliding segmented control that uses CSS Custom Properties calculated via JS to animate a pseudo-element background. The layout relies on flexbox for equal distribution, while calc() dynamically positions the “pill” based on the active index, enhanced by a springy cubic-bezier transition.

A pure CSS pricing component that creates a dimensional ‘ribbon’ aesthetic solely through ::after pseudo-elements and clip-path geometry. The layout leverages CSS Custom Properties for distinct color themes and calc with negative margins to extend elements beyond the parent container, creating a folded paper effect without any JavaScript dependencies.

Explore a variety of sophisticated hover effects, where complex animation patterns are created using advanced CSS selectors like :nth-child(-n + 3). These selectors target specific ranges of “cells” generated by Splitting.js.

This demo is a showcase of Splitting.js, a library that splits HTML elements into granular parts for detailed animation. The “Course Clear” heading is split into individual characters, and a grid overlay is created with data-splitting="cells", allowing for complex, staggered animations on each part.

A unique drop cap is created with modern CSS techniques - its complex background is generated by layering linear-gradient and repeating-conic-gradient, while its responsive size is managed by calc().

A pure CSS pattern created by overlaying five radial-gradient declarations on a single element. The main feature is that all ring sizes and their count depend on a couple of CSS variables, making the pattern fully scalable using calc().

A border effect for an <img> tag - the size of the decorative edge, created with repeating-conic-gradient and -webkit-mask, is dynamically calculated via a complex calc() function controlled by CSS variables.

A modular React card component where a single pointermove listener updates CSS variables, powering a customizable, multi-layer glow and spotlight effect.

An SVG-based battery meter where the fill level is a clever trick - JavaScript updates a CSS variable that drives a calc() function to animate the stroke-dashoffset of several <circle> elements simultaneously, creating a multi-layered visual effect.

A digital-analog clock hybrid where JavaScript’s setInterval only updates a single CSS variable - --dRotate, while all the complex rotation and counter-rotation of the dials and numbers is handled by pure CSS transform.

An interactive 3D card effect where JavaScript tracks pointermove, calculates the relative cursor position, and passes it to --ratio-x and --ratio-y CSS variables, while CSS uses calc() to drive rotateX and rotateY.

A demonstration of the power of CSS and Sass - the knob is a standard range slider where the thumb is styled as a knob, and its transform: rotate is calculated based on the input’s value via CSS variables updated by JS.

An unconventional use of datalist to create a custom ruler scale under the slider, where tick marks are styled using box-shadow and linear-gradient, and their visibility is controlled by CSS variables within media queries.

A demonstration of creating perfectly equilateral CSS triangles using the native pow() and sqrt() mathematical functions inside calc(). This showcases how to achieve geometric precision without preprocessors, relying solely on modern CSS.

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.

An interactive radial carousel in pure CSS, where element positioning in a circle is calculated via calc(). State management is handled without JS using the “radio button hack” and the :has() pseudo-class, which triggers rotation animations and sequential content appearance.

A “slicing” fill effect created with two pseudo-elements - rotated rectangles that slide in from opposite sides on hover. The animation state is controlled by the --p CSS variable, which changes from 0 to 1, triggering the transform of the pseudo-elements via calc() to create a complex geometric transition.