Comprehensive Guide to CSS Functions: 66 Common Functions Explained

With the rapid evolution of web technologies, CSS has grown from a simple stylesheet language into a powerful tool equipped with numerous built‑in functions. These functions enhance designers' capabilities, enable dynamic styling, and support responsive and interactive layouts. This article provides an in‑depth exploration of 66 commonly used CSS functions, covering their syntax, usage, and practical code examples.

Basic Functions

attr() retrieves the value of an HTML attribute and can be used in pseudo‑elements. Example:

div { background-color: attr(data-color); }

Counter Functions

counter() and counters() manage CSS counters for numbering lists, headings, etc. Example:

selector::before { content: counter(counter-name); }

For nested lists, counters() can concatenate multiple counters:

ol { counter-reset: item; }
li::before { counter-increment: item; content: counters(item, " "); }

URL Functions

url() references external resources such as images, fonts, or cursor files. Example:

body { background-image: url('images/background.jpg'); }

Variable Functions

var() accesses CSS custom properties. Variables are declared with --name and can include fallback values.

:root { --main-color: blue; }
body { background-color: var(--main-color, red); }

Element Function

element() renders an HTML element as a background image. Example:

#someOtherElement { background-image: element(#myElement); }

Image Set Function

image-set() provides different image candidates for varying device pixel ratios.

.img-responsive { background-image: image-set(url('image-320w.jpg') 1x, url('image-640w.jpg') 2x); }

Color Functions

Various functions define colors:

rgb() / rgba()

hsl() / hsla()

hwb()

lab() / lch()

device-cmyk()

color-mix()

oklab()

Example of rgb() and rgba() :

color: rgb(255, 0, 0);
background-color: rgba(0, 255, 0, 0.3);

Filter Functions

CSS filters modify the visual appearance of elements. Common functions include:

blur()

brightness()

contrast()

saturate()

sepia()

invert()

grayscale()

drop-shadow()

hue-rotate()

Example of combining filters:

.complex-effect { filter: blur(5px) brightness(50%) contrast(200%) grayscale(50%); }

Gradient Functions

Gradients create smooth color transitions:

linear-gradient() / repeating-linear-gradient()

radial-gradient() / repeating-radial-gradient()

conic-gradient() / repeating-conic-gradient()

Example of a linear gradient:

background: linear-gradient(to right, red, yellow);

Mathematical Functions

calc() performs arithmetic operations within CSS values. It can be combined with min() , max() , and clamp() to constrain sizes.

.element { width: calc(50% - 50px); }
.title { font-size: clamp(12px, 2vw, 24px); }

Graphic Functions

Functions for clipping and shaping elements:

circle()

ellipse()

inset()

polygon()

path()

Example of a polygon clip‑path:

clip-path: polygon(50% 0, 0% 100%, 100% 100%);

Transform Functions

Transformations modify element geometry in 2D or 3D space. Key functions include:

scale() , scaleX() , scaleY() , scaleZ() , scale3d()

rotate() , rotateX() , rotateY() , rotateZ() , rotate3d()

translate() , translateX() , translateY() , translateZ() , translate3d()

skew() , skewX() , skewY()

perspective()

matrix() , matrix3d()

Example of a 3D rotation with perspective:

.element { transform: perspective(500px) rotateX(45deg); }

Layout Functions

CSS Grid layout can be made responsive with functions such as fit-content() , minmax() , and repeat() .

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, fit-content(100%))); grid-gap: 20px; }

Animation Timing Functions

Custom easing can be defined with cubic-bezier() , while steps() creates discrete jumps.

div { transition: width 2s cubic-bezier(0.25, 0.1, 0.25, 1.0); }
@keyframes jump { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }
div { animation: jump 2s steps(2, end) infinite; }

This guide equips developers with the knowledge to leverage the full spectrum of CSS functions for modern, dynamic, and responsive web design.