42 CSS calc() Examples

This is a Glowing Border Trace Button. It utilizes embedded SVG rectangles to create a moving neon stroke along the perimeter upon interaction. Its function is to provide highly visible, tactile feedback for primary actions without disrupting the core layout geometry or triggering expensive repaints.

This is an Interactive Drag-and-Drop Jigsaw Puzzle. It dissects a single raster image into an interlocking grid of movable pieces without relying on a single line of JavaScript. Its function is to gamify visual content, converting passive image consumption into a tactile, logic-driven interaction.

This is a Tilting Diamond Range Slider Effect. It tracks user input through a hidden native range element, overlaying a custom graphical interface. Its primary function is to inject physical inertia into a standard digital control. The tooltip mimics mass, lagging behind rapid movements and tilting in the direction of travel.

The Slingshot Elastic Stretch Toggle is an experimental UI switch that utilizes exaggerated spatial movement to signal state changes. It replaces the standard sliding thumb with a “dual-handle” system that appears to shoot across the viewport using a high-velocity slingshot effect. Its function is to provide an high-energy alternative to traditional toggles, making a simple boolean selection feel like a physical, kinetic event.

This snippet showcases Modern Container Query Product Cards. It represents the bleeding edge of CSS architecture, utilizing @scope, @layer, and @property to create highly encapsulated, fluid components. Its function is to provide a robust e-commerce card layout that automatically adjusts its internal styling and grid distribution based on the physical size of its container, not the viewport.

This is a React Circular Stat Dashboard. It replaces a standard linear or grid-based profile view with a dynamic, radial layout. Its function is to present a user’s avatar centrally while mathematically orbiting their related statistics and quotes around them, utilizing React state to handle smooth entering and exiting transitions between different profiles.

This is an Interactive Radial CSS Image Carousel. It arranges a deck of image cards into a curved, fan-like layout. Its function is to provide an engaging, space-saving gallery interface where hovering over a card gracefully shifts its neighbors away along a circular path, bringing the focused item into clear view without relying on JavaScript math.

This is a Scroll-Driven Circular Typographic Scramble. It utilizes experimental CSS animation-timeline to bind complex trigonometric and geometric transitions directly to the user’s scrollbar. Its function is to create a highly engaging, interactive hero section where chaotic, scattered letters perfectly align into a readable circular sentence as the user scrolls down.

This is a Cosmic 3D Galaxy Button. It replaces a standard solid color hover state with a dynamic, multi-layered particle system. Its function is to serve as a high-impact primary call-to-action, using spatial depth and global page illumination to draw maximum user focus.

This is a Pure CSS Animated Coffee Cup Loader. It transforms static loading screens into an engaging, playful visual loop. Its function is to provide delightful feedback during wait times, utilizing the classic animation principle of squash and stretch without relying on any JavaScript.

This is an Animated SVG Alignment Toolbar. It replaces static UI states with physical motion. Its function is to provide immediate, tactile feedback for spatial arrangement settings (Top, Middle, Bottom) using native form inputs.

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.