CSS Functions

CSS functions let you perform calculations, insert values dynamically, or apply transformations. They are used inside property values to make styles more flexible and powerful.

Here are some of the most commonly used CSS functions:

• calc() Performs calculations

• var() Uses CSS variables

• rgb(), hsl() Color functions

• min(), max(), clamp() Flexible sizing

• url() Loads external resources (e.g., images)

• attr() Reads HTML attribute values

• rotate() Rotates an HTML element

• scale() Scales the size of an HTML element

• perspective() Applies a 3D effect to an HTML element

The CSS calc() Function

The calc() function performs a mathematical calculation that will be used as the property value.

It supports addition, subtraction, multiplication, and division, and can combine different units, like pixels and percentages.

The following example ensures that the container always fills the width, but leaves space (150px) for a sidebar/padding:

Example

.container {
  width: calc(100% - 150px);
  border: 1px solid black;
  padding: 10px;
}

The CSS var() Function

The var() function is used to insert the value of a CSS variable.

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

The following example declares three global variables (--main-bg-color, --main-txt-color, --main-padding), and then use the var() function to insert the values of the variables later in the style sheet:

Example

:root {
  --main-bg-color: linen;
  --main-txt-color: gray;

  --main-padding: 10px;
}

#div1 {
  background-color:
  var(--main-bg-color);
  color: var(--main-txt-color);

  padding: var(--main-padding);
}

The CSS rgb() Function with Opacity

The rgb() function specifies a color using the Red-Green-Blue (RGB) color model. An optional alpha component can also be added (which represents the transparency of the color).

The following example adds opacity to the background color without changing the element's text opacity:

Example

button {
  background: rgb(255 0 0 / 0.3);
  padding: 8px;

  }

The CSS hsl() Function

The hsl() function specifies a color using the Hue-Saturation-Lightness (HSL) color model. An optional alpha component can also be added (which represents the transparency of the color).

The following example shows the color green (120) with different lightness:

Example

#p1 {background-color:hsl(120 100% 50%);}
#p2 {background-color:hsl(120
  100% 75%);}
#p3 {background-color:hsl(120 100% 25%);}

The following example shows some HSL colors with opacity:

Example

#p1 {background-color:hsl(120 100% 25% / 20%);}
#p2
  {background-color:hsl(290 60% 70% / 0.3);}

The CSS min() Function

The min() function help create responsive layouts with flexible sizing.

The min() function will use the smallest value, from a comma-separated list of values, as the property value.

The following example sets the width of #div1 to whichever value is smallest: 50% or 300px:

Example

#div1 {
  width: min(50%, 300px);
}

The CSS max() Function

The max() function help create responsive layouts with flexible sizing.

The max() function will use the largest value, from a comma-separated list of values, as the property value.

The following example sets the width of #div1 to whichever value is largest: 50% or 300px:

Example

#div1 {
  width: max(50%, 300px);
}

The CSS clamp() Function

The clamp() function is used to set a value that will adjust responsively between a minimum value, a preffered value, and a maximum value depending on the size of the viewport.

The following example sets the font-size of the div element to 2.5vw, but never smaller than 1rem or larger than 2rem:

Example

div {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

The CSS url() Function

The url() function is used to load external resources like images and fonts.

The following example sets a background image for the page:

Example

body {
  background-image: url("paper.gif");
}

The CSS attr() Function

The attr() function is used to insert an attribute value into content.

The following example inserts the value of the cite attribute after the blockquote text:

Example

blockquote:after {
  content: " (source: " attr(cite) ") ";

  color: hotpink;
}

The CSS rotate() Function

The rotate() function is used to rotate an element.

The following example rotates several <div> elements:

Example

#myDiv1 {
  transform: rotate(25deg);
}

#myDiv2 {

  transform: rotate(45deg);
}

#myDiv3 {
  transform: rotate(-45deg);
}

The CSS scale() Function

The scale() function is used to scale the size of an element.

The following example scales an image to a little bit larger when hovering over it:

Example

img:hover {
  transform: scale(1.1);
}

The CSS perpective() Function

The perspective() function is used to apply a 3D effect directly to an HTML element.

Example

.box {
  transform: perspective(500px) rotateY(45deg);
}

Summary

CSS functions are useful tools to:

• Perform dynamic calculations

• Use flexible measurements

• Apply reusable styles

• Control layouts and colors responsively

Related Pages

• CSS Functions Reference