CSS Functions

Functions are a type of CSS value inserted in place of a hardcoded value on a property. Interact with the sliders below to see each function in action.

Sizing & Math
calc()
Performs math operations — mix units freely, like % with px.
off 40px
calc(100% − 40px)
min()
Returns the smallest of its arguments — useful for responsive caps.
% 60%
min(60%, 300px)
max()
Returns the largest of its arguments — great for minimum sizes.
% 30%
max(30%, 120px)
clamp()
Keeps a value between a min and max, scaling fluidly in between.
vw 400
clamp(1rem, 4vw, 3rem)
Sample text scales here
Color
rgb() / rgba()
Sets color by red, green, blue channels. rgba() adds alpha transparency.
R99
G60
B220
A1
rgba(99, 60, 220, 1)
hsl() / hsla()
Sets color by hue, saturation, lightness — intuitive for designing palettes.
H260
S70
L55
A1
hsla(260, 70%, 55%, 1)
Filter
blur()
Applies a Gaussian blur to the element.
px 0px
brightness()
Adjusts element brightness. 1 = normal, 0 = black, 2 = doubled.
val 1
drop-shadow()
Applies a shadow that follows the element's actual shape, not its box.
px 8px
drop-shadow(4px 4px 8px color)
Transform
scale()
Scales an element up or down from its center point.
val 1
box
rotate()
Rotates an element by a given angle in degrees.
deg 0°
box
translate()
Moves an element along X and/or Y without affecting layout flow.
X0px
Y0px
box
url()
Loads an external resource — images, fonts, SVG filters — into a CSS property.
background-image: url('photo.jpg'); src: url('font.woff2') format('woff2'); list-style-image: url('bullet.svg'); cursor: url('cursor.cur'), auto;