40+ CSS calc() Examples (Page 2)

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.