List of functions that can be used in CSS.
CSS functions list.
Cascading Style Sheets Level 2 - Revision 1 Specification
rect()
Defines a rectangle that can be used to clip an element with the clip property. Its use is now deprecated in favor of inset().
CSS Box Sizing Module
fit-content()
Calculates a dimension based on content and boundaries.
CSS Color Adjustment Module
light-dark()
Allows you to choose between two colors to adapt the appearance of an element to the color sheme used (light or dark).
CSS Color Module
color()
Defines a color in a color space other than
sRGB.color-mix()
Mix two colors in a given color space.
device-cmyk()
Define a color based on a device, specifying cyan, magenta, yellow, and black values.
hsl()
Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.
hsla()
Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.
hwb()
Defines a color based on its hue and a dose of black and white.
lab()
Defines a color in the
L*a*b* system.lch()
Defines a color in the
L*C*H* system.oklab()
Defines a color in the
L*a*b* system with a perceptual correction.oklch()
Defines a color in the
L*C*H* system with a perceptual correctionrgb()
Determines a color from the values of Red, Green and Blue.
rgba()
Determines a color and its transparency from the values of Red, Green, Blue and the Alpha value.
CSS Counter Styles
symbols()
Defines the symbols used for custom numbering, as well as the type of numbering (numeric, alphabetical, and so on).
CSS Custom Properties for Cascading Variables Module Level 1
var()
Retrieves the value of a custom property (variable).
CSS Easing Functions
cubic-bezier()
Determines, from 4 parameters, a non-linear progression for animations.
steps()
This is an easing function, which defines a jerky progression, step by step.
CSS Fonts Module
palette-mix()
Establish the mixture of two color palettes from two different typefaces.
CSS Generated Content Module
leader()
When used with the content property, this function allows you to insert leader points.
target-counter()
Returns the value of a counter, which can be inserted into the document with the content property.
target-counters()
Returns the hierarchical value of a counter, which can be inserted into the document with the content property.
target-text()
Returns the text of an element designated by a URL.
CSS Grid Layout Module
minmax()
Returns a value within a range, to size the height of rows or the width of columns in a grid.
repeat()
Makes it easier to define the rows or columns of a grid when there are many of them.
CSS Images Module
conic-gradient()
Sets a conical color gradient.
cross-fade()
Mixes multiple images.
element()
Récupère l'aspect d'un élément sous forme d'une image.
image()
Refers to an image, specifying, if necessary, its reading direction.
image-set()
Offers the browser a choice of images so that it can choose the most suitable one (resolution, format, etc.).
linear-gradient()
Determines a color gradient that moves linearly throughout the element.
radial-gradient()
Determines a radial color gradient (from the center to the edges).
repeating-conic-gradient()
Sets a conical color gradient, and repeats it across the entire surface of the element.
repeating-linear-gradient()
Determines a linear color gradient and repeats it over the entire surface of the element.
repeating-radial-gradient()
Determines a radial color gradient and repeats it over the entire surface of the element.
stripes()
Sets a color band image.
CSS Lists and Counters Module
counter()
Returns the current value of a counter. The latter is handled by the
counter-reset, counter-set, and counter-increment properties.counters()
Returns the value of a hierarchical counter.
CSS Shapes Module
circle()
Defines a circle that can be used to clip an element or set a circumvention margin.
ellipse()
Defines an ellipse.
inset()
Defines a rectangle, which can be used to cut out an element.
path()
Defines an outline based on the SVG syntax of a path.
polygon()
Defines a shape
CSS Transforms Module
matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Applies a series of 3D transformations to an element.
perspective()
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).
CSS Values and Units Module
abs()
Calculates the absolute value of a number.
acos()
Calculates the angle at which the cosine is equal to the specified value.
asin()
Calculates the angle at which the sine is equal to the specified value.
atan()
Calculates the angle whose tangent is equal to the specified value.
atan2()
Calculates the angle between the x-axis and the line connecting the origin point to the specified point.
attr()
Returns the value of an attribute (standard or custom) from HTML or XML code.
calc()
Performs a calculation. Can be used in place of a value for a property.
clamp()
Calculates a value between two extreme values.
cos()
Calculate the cosine of an angle.
exp()
Calculates the exponential of a number.
hypot()
Calculates the square root of a sum of squares of numbers.
log()
Calculates the logarithm of a number.
max()
Determines the largest value among a series of values.
min()
Determines the smallest value among a series of values.
mod()
Calculates the remainder of the integer division between two numbers.
pow()
Calculates a power boost.
rem()
Calculates the remainder of the integer division between two numbers.
round()
Calculates the rounding of a number.
sign()
Determines the sign of a number.
sin()
Calculate the sine of an angle.
sqrt()
Calculates the square root of a number.
src()
Specifies the address of a resource such as an image for example. Synonym of the url() function.
tan()
Calculates the tangent of an angle.
url()
Specifies the address of a resource such as an image for example.
Filter Effects Module
blur()
blur() is a graphical filter that can be used with the filter property. The function applies a blur effect to the clip.
brightness()
Adjusts the brightness of an element (graphic filter).
contrast()
Adjusts the contrast of an element (graphic filter).
drop-shadow()
Sets the shadow of an element: dimensions, blur, color (graphic filter).
grayscale()
Converts an element to grayscale (graphic filter) in a less complete way. In the extreme, colors can be completely removed.
hue-rotate()
Changes the colors of an image by rotating hues (graphic filter).
invert()
Inverts the colors of an element (graphic filter).
opacity()
Determines how transparent an element is (graphic filter).
saturate()
Sets the color saturation of an element (graphic filter).
sepia()
Applies a sepia effect to an element (graphics filter).