Functions | CSS-Tricks

Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. Some CSS functions even let you nest other functions within them!

`abs()`

The abs() function takes in an argument and returns its absolute value, i.e., it always returns the argument's positive value.

.element { width: abs(-200px); }

`acos()`

The acos() trigonometric function takes a number and returns its inverse for the cos() function.

.element { rotate: acos(0.5) }

`anchor()`

Experimental

The CSS anchor() function takes an anchor element’s side and resolves to the <length> where it is positioned. It can […]

.target { top: anchor(--my-anchor bottom); }

`anchor-size()`

Experimental

The CSS anchor-size() function takes an anchor element and resolves to its width or height <length>, essentially returning an anchor’s […]

.target { width: anchor-size(width); }

`asin()`

The asin() trigonometric function takes a number and returns its inverse for the sin() function.

.element { rotate: asin(-0.5); }

`atan()`

The atan() trigonometric function takes a number and returns its inverse for the tan() function

.element { rotate: atan(1); }

`atan2()`

The atan2() trigonometric function takes two values (Y, X) and returns its inverse for the atan() function.

.element { rotate: atan2(200px, 200px); }

`attr()`

The CSS attr() function enables you to pass the value of an HTML attribute over to CSS.

.element { color: attr(data-color type()); }

`blur()`

The blur() function applies a Gaussian blur effect to an element, so we can use it to soften an element directly from CSS.

.element { filter: blur(5px); }

`brightness()`

The brightness() filter function let us adjust an element brightness so it looks lighter or darker.

.element { filter: brightness(1.5); }

`calc()`

The CSS calc() function performs math between values, whether that's addition, subtraction, division, or multiplication, along with any other math function.

.element { height: calc(100vh - 90px); }

`calc-size()`

Experimental

The CSS calc-size() function enables us to perform calculations using intrinsic size values such as auto, min-content, max-content, and fit-content. […]

.element { width: calc-size(auto, size); }

`circle()`

The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path […]

.shape { clip-path: circle(100px); }

`clamp()`

The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.

.element { width: clamp(200px, 50%, 800px); }

`color()`

The CSS color() function allows you to use a color directly from a color space, either an existing color space or a custom one.

.element { color: color(rec2020 0.5 0.15 0.115 / 0.5); }

`color-mix()`

The color-mix() function lets us mix two colors across a particular color space in CSS.

.element { color: color-mix(in oklab, red 20%, bisque 80%); }

`conic-gradient()`

The CSS conic-gradient() function creates a color gradient that places the colors around a circle, making them smoothly transition across its circumference in a cone-like shape.

.element { background-image: conic-gradient(from 45deg, white, black, white); }

`cos()`

The CSS cos() function takes a calculation that resolves to either an <angle> or <number> and returns the result's cosine, which is always a number between -1 and 1. It's incredibly good for drawing waves or laying things out in waves, inverse of the sin() function.

.element { transform: translateY(calc(cos(20deg * var(--i)) * 100px)); }

`counter()`

The counter() function takes the number (or symbol) of a list item and makes it available to display outside the list. In other words, it makes things that aren't lists look like lists. For example, we can take the current list number of an existing list counter, format it as a Roman numeral, then display it in front of a heading:

h2::before {  content: counter(my-counter, upper-roman) ". "; }

`counters()`

The CSS counters() function can combine multiple lists into a single list. So, if you have two active counters on the page, counters() can be used to combine them so that the list numbers are used to count the items in both lists together.

li::marker { content: counters(item, ".") ") "; }

`cross-fade()`

Experimental

The cross-fade() function lets you blend more than one image at a specified transparency value.

.element { background-image: cross-fade(url(a), url(b)); }

`cubic-bezier()`

The cubic-bezier() function lets you define custom timing curves for CSS animations and transitions. It gives you precise control over how elements […]

.element { transition: all 1s cubic-bezier(0.1, 0.9, 0.9, 0.1); }

`drop-shadow()`

The drop-shadow() function applies a shadow effect to an element.

.element { filter: drop-shadow(#301934 20px 10px 4px); }

`ellipse()`

The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.

.shape { clip-path: ellipse(60px 40px); }

`env()`

Experimental

The CSS env() function replaces environment variables into CSS. To be more precise, it is a way to insert user-agent-defined variables into your stylesheet.

.element { bottom: env(safe-area-inset-bottom, 0px); }

`exp()`

The CSS exp() function lets you raise the e constant to the power of a given number.

.element { font-size: calc(1rem * exp(1.5)); }

`fit-content()`

The fit-content() function combines the max() and min() functions in a single formula to calculate an element’s size

.element { grid-template-columns: 1fr 1fr fit-content(200px); }

`grayscale()`

The grayscale() filter function converts an element's colors into shades of gray.

.element { filter: grayscale(100%); }

`:heading`

Experimental

The CSS :heading pseudo-class (also used as :heading()) pseudo-class function can be used to select multiple heading levels at once.

:heading(1, 6) { line-height: 1.35; }

`hsl()`

The CSS hsl() function represents color in the sRGB color space and displays it according to its hue, saturation, and lightness. We […]

.element { color: hsl(90deg, 50%, 50%); }

`hue-rotate()`

The hue-rotate() function rotates the color of an element and its content to a specified hue on the color wheel.

.element { filter: hue-rotate(160deg); }

`hypot()`

The hypot() function takes a list of values and returns the square root of the sum of their squares.

.element { width: hypot(30vmin, 40vmin); /* 50vmin */ }

`image()`

The CSS image() function renders an image from a URL. We also can add a solid color as a fallback, specify the image’s direction, and use media fragments.

.element { background-image: image(rtl "example.png#xywh=0,15,35,35", #dddddd); }

`image-set()`

The CSS image-set() function allows the browser to display the best image from a given set of images.

.element { background-image: image-set(url("image.png") 1x, url("image-large.png") 2x);
}

`inset()`

The CSS inset() function allows you to create rectangles to use with the shape-outside, clip-path, and offset-path properties.

.element { clip-path: inset(10px 2em 30% 3vw); }

`invert()`

The invert() function applies a invert filter to an element and its content. It is used with the filter property.

.element { filter: invert(0.8); }

`lab()`

The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.

.element { color: lab(50% 50% 50% / 0.5); }

`lch()`

The lch() color function specifies colors in the CIELAB color space. Unlike the lab() function — which uses Cartesian coordinates — the lch() function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive.

.element { color: lch(10% 0.215 15deg); }

`light-dark()`

The light-dark() function takes two color values—one for “light” mode and one for “dark” mode, and automatically switches between them depending on […]

html { color: light-dark(#000, #fff); }

`linear()`

The linear() function let us define stops in an animation/transition, which will progress sequentially along a straight line.

.element { animation-timing-function: linear(0, 0.25, 1); }

`linear-gradient()`

Creates a gradient by placing colors perpendicularly along a straight line and smoothly transitioning between them.

.element { background-image: linear-gradient(slateblue, tomato); }

`matrix()`

The matrix() function combines all the 2D transform functions into a single CSS declaration. It covers the translate(), skew(), and scale() functions

.element { transform: matrix(1, 0, 0, 1, 0, 0); }

`max()`

The CSS max() function takes two or more comma-separated arguments of spacing values, evaluates them, and returns the largest value of the bunch.

.element { width: max(80%, 800px); }

`min()`

The CSS min() function takes two or more comma-separated arguments of spacing values, evaluates them, and returns the smallest value of the bunch.

.element { width: min(80%, 800px); }

`minmax()`

The CSS minmax() function is used exclusively with CSS Grid to define a size range for grid tracks (i.e., the grid’s rows and columns). It lets you specify two arguments — a minimum size and a maximum size for a track — allowing the grid track to grow and shrink within that range, depending on the available space.

.element { grid-template-columns: minmax(100px, 400px) 1fr 1fr; }

`mod()`

The CSS mod() function returns the remaining “modulo” after the first argument is modulus-divided by the second argument. It’s the […]

.element { width: mod(10px, 4px); }

`oklab()`

The oklab() function represents colors in the OKLab color space. OKLab is an “OK” and even better version of the lab color […]

.element { color: oklab(25.77% 25.77% 54.88%; }

`oklch()`

The CSS oklch() function specifies colors with three components — Lightness (L), Chroma (C), and Hue (H) — offering a perceptually uniform system, which is a fancy way of saying that it is closely aligned with how humans perceive color.

.element { color: oklch(70% 0.15 240); }

`opacity()`

The CSS opacity() function applies a transparency filter to an element and its content. It is used with the filter property.

.element { filter: opacity(50%); }

`paint()`

Experimental

The CSS paint() function allows us to use PaintWorklets as background images in CSS. PaintWorklets are images created in JavaScript that are applied to an element in CSS with the paint() function.

.element { background-image: paint(polka-dots); }

`path()`

The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.

.element { clip-path: path("…"); }

`polygon()`

The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.

.element { clip-path: polygon(50% 0%, 75% 6.7%, 93.3% 25%, 100% 50%, 93.3% 75%, 75% 93.3%, 50% 100%, 25% 93.3%, 6.7% 75%, 0% 50%, 6.7% 25%, 25% 6.7%); }

`progress()`

The progress() functions tells us where a value is relative to a minimum and a maximum as a number between 0 and 1.

.element { opacity: progress(100vw, 400px, 1200px); }

`radial-gradient()`

The radial-gradient() functions creates a circular or elliptical color gradient starting from a center point and spreading outward.

.element { background: radial-gradient(red, orange); }

`random()`

Experimental

The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric […]

.element { width: random(5rem, 25rem, by 5rem); }

`ray()`

The ray() function is used in combination with the offset-path property and creates a line segment, a ray. It lets you move or place an element using polar coordinates, i.e. coordinates based on a distance and an angle instead of Cartesian coordinates, where the X coordinate is on the horizontal axis and the Y coordinate is on the vertical axis.

.element { offset-path: ray(180deg farthest-side contain at 100px 200px); }

`rem()`

The CSS rem() function (also called the “remainder” function) returns the amount left over after the first argument’s integer is divided by the second argument.

.element { width: rem(10px, 4px); }

`repeating-conic-gradient()`

The repeating-conic-gradient() function creates a repeating gradient by placing colors around a circle.

.element {
  background-image: repeating-conic-gradient(from 45deg in oklch, #231942, #be95c4 20deg, #231942 40deg);
}

`repeating-linear-gradient()`

The repeating-linear-gradient() function creates a repeating gradient that places colors along a straight line and smoothly transitions between them. We define a section of the gradient, which then gets repeated until it fills the available space.

.element { background-image: repeating-linear-gradient(tomato, slateblue, tomato 50%); }

`repeating-radial-gradient()`

The repeating-radial-gradient() function creates a circular or elliptical color gradient. The gradient is then repeated infinitely.

.element { background: repeating-radial-gradient(crimson, purple 50px, crimson 100px); }

`rgb()`

The CSS rgb() color function represents color in the sRGB color space specifying their redness (r), greenness (g), and blueness (b), and an optional transparency value.

.element { color: rgb(0 0 0 / 0.5); }

`round()`

The CSS round() function enables us to round a number, percentage, or dimension (i.e., a number with units attached). We’ve been able to round using […]

.element { width: round(10.4px, 1px); }

`saturate()`

The saturate() function increases or decreases the saturation of an element.

.element { filter: saturate(200%); }

`scroll()`

Experimental

The CSS scroll() function provides an anonymous scroll timeline when used as a value for the animation-timeline property. Instead of explicitly setting up and referencing a named timeline using scroll-timeline-name, the scroll() function handles it for you. You simply tell it which scroll container to track (called the “scroller”) and which axis to follow, and it returns an anonymous scroll timeline.

.element { animation-timeline: scroll(); }

`sepia()`

The sepia() function changes an element’s color to a warmer brownish-yellow tint.

.element { filter: sepia(100%); }

`shape()`

Experimental

The CSS shape() function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path() function.

.triangle { clip-path: shape(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, close); }

`sibling-count()`

Experimental

The sibling-count() CSS function returns the total number of sibling elements an element has, including itself. Think of it sort […]

ul li { width: calc(100% / sibling-count()); }

`sibling-index()`

Experimental

The sibling-index() CSS function returns the position of an element among its siblings, starting from 1. It's similar to :nth-child(), but instead of using it in selectors, you can now use the index directly within CSS functions and calculations.

ul li { transform: translateX(calc(sibling-index() * 10px)); }

`sign()`

The sign() function takes a math expression and returns 1 if the result is positive, -1 if it's negative or 0 if it's zero.

.element { top: calc(sign(var(--scroll)) * 100px); }

`sin()`

The CSS sin() function takes a calculation that resolves to either an <angle> or <number> and returns the result's sine, which is always a number between -1 and 1. It's incredibly good for drawing waves or laying things out in waves, inverse of the cos() function.

.element { transform: translateY(calc(sin(20deg * var(--i)) * 100px)); }

`steps()`

The CSS steps() function let us divide an animation/transition progress into a specified number of equal-length intervals or steps.

.element{ animation-timing-function: steps(10, jump-start); }

`superellipse()`

The superellipse() function in CSS works with the corner-shape property to control the curvature of an element’s corners.

.element { corner-shape: superellipse(2); }

`symbols()`

Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.

ul { list-style: symbols(cyclic "🥬"); }

`tan()`

The CSS tan() function takes a calculation that resolves to either an <angle> or <tnumber> and returns the result's tangent, which ranges between -Infinity and Infinity.

.element { transform: translateY(calc(tan(15deg * var(--i)) * 5dvh)); }

`url()`

The url() function lets us import an external resource, usually a file, into CSS.

.element { background-image: url("https://example.com/image.png"); }

`view()`

Experimental

The view() function tracks the progress of an element within a scrollable viewport (the nearest scroll container), when used in the animation-timeline […]

.element { animation-timeline: view(); }

`xywh()`

The CSS xywh() function allows you to create rectangles by setting the upper-left corner point and the width and height for use in the shape-outside, clip-path properties.

.element { clip-path: xywh(60px 4em 50% 10vw round 10px 30px); }