CSS Functions
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 calculationsvar()Uses CSS variablesrgb(),hsl()Color functionsmin(),max(),clamp()Flexible sizingurl()Loads external resources (e.g., images)attr()Reads HTML attribute valuesrotate()Rotates an HTML elementscale()Scales the size of an HTML elementperspective()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;
}
Try it Yourself »
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);
}
Try it Yourself »
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:
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%);}
Try it Yourself »
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);}
Try it Yourself »
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:
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:
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:
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:
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;
}
Try it Yourself »
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);
}
Try it Yourself »
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:
The CSS perpective() Function
The perspective()
function is used to apply a 3D effect directly to an HTML element.
Summary
CSS functions are useful tools to:
- Perform dynamic calculations
- Use flexible measurements
- Apply reusable styles
- Control layouts and colors responsively
