CSS Functions Complete Reference

Last Updated : 09 Jan, 2025

CSS functions are used to dynamically define or manipulate property values in stylesheets, making designs more flexible and responsive.

Retrieve values like attributes with attr() or calculate sizes with calc().
Adjust colors using functions like rgb() or hsl().

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: calc(50% - 10px);
            background: linear-gradient(to right, lightblue, lightgreen);
            height: 100px;
            border: 1px solid black;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

The calc() function dynamically calculates the width of the box as 50% of the parent element minus 10px.
The linear-gradient() function creates a smooth gradient background transitioning from light blue to light green.

The complete list of CSS Functions is given below:

Functions	Description	Example
attr()	Returns the value of an attribute of the selected elements.	Try
blur()	Apply a blurred effect filter on the image.	Try
brightness()	Apply a filter to set the brightness of the image.	Try
calc()	Returns the value of an attribute of the selected elements.	Try
circle()	Create floating text around the circular shape picture or anything else	Try
conic-gradient()	Set a conic gradient as the background image.	Try
contrast()	Apply a filter to set the contrast of the image.	Try
cubic-bezier()	Define a Cubic Bezier curve.	Try
drop-shadow()	Apply a filter to the image to set the shadow of the image.	Try
ellipse()	Create floating text around the ellipse shape picture or anything else.	Try
env()	Insert the value of a user agent-defined environment variable into your CSS.	Try
grayscale()	Apply a filter to the image to set the grayscale of the image.	Try
hsl()	Define the colors using the Hue-saturation-lightness model (HSL).	Try
hsla()	Define the colors using the Hue Saturation Lightness Alpha (HSLA) model.	Try
hue-rotate()	Apply a filter to the image to set the hue rotation of the image.	Try
inset()	It is used with the filter property to change the inset of images.	Try
invert()	Set the invert of the color of the sample image.	Try
linear-gradient()	Set the linear gradient as the background image.	Try
matrix()	Create a homogeneous 2D transformation matrix.	Try
matrix3d()	Create a 3D transformation as a 4×4 homogeneous matrix.	Try
max()	Return the largest value from a set of comma-separated values.	Try
min()	Return minimum value from a set of comma-separated values.	Try
opacity()	Apply a filter to the image to set the transparency of the image.	Try
perspective()	It is used with the transform property to set the perspective effect on images.	Try
polygon()	It is used with the filter property to create a polygon of images or text.	Try
radial-gradient()	Set a radial gradient as the background image.	Try
repeating-conic-gradient()	Repeat conic gradients in the background image.	Try
repeating-linear-gradient()	It is used to repeat linear gradients.	Try
repeating-radial-gradient()	It is used to repeat radial gradients.	Try
rgb()	It is used to define the colors using the Red Green Blue (RGB) model.	Try
rgba()	It is used to define the colors using the Red-Green-Blue-Alpha (RGBA) model.	Try
rotate()	Rotate an element based on the given angle as an argument.	Try
rotate3d()	Set the style in web pages that contain HTML elements.	Try
rotateX()	Rotate an element around the x-axis.	Try
rotateY()	Rotate an element around the vertical axis.	Try
rotateZ()	Rotate an element around the z-axis.	Try
saturate()	It is used to super-saturate or desaturate the input image.	Try
scale()	It is used to resize the element in 2D plane.	Try
scale3d()	Resize the element in a 3D space. It scales the elements in x, y, and z planeR	Try
scaleX()	Resize an element along the x-axis in a 2D plane.	Try
scaleY()	Resize an element along the y-axis in a 2D plane.	Try
scaleZ()	Resize an element along the z-axis.	Try
sepia()	Apply a filter to the image to convert an image into a sepia image.	Try
skew()	It is used to transform an element in the 2D plane.	Try
skewX()	Transform an element in the horizontal direction in a 2D plane.	Try
skewY()	Transform an element in the vertical direction in a 2D plane.	Try
translate()	Reposition an element in a horizontal and vertical direction.	Try
translate3d()	Reposition an element in 3D space.	Try
translateX()	Reposition the element along the horizontal axis.	Try
translateY()	Reposition the element along the vertical axis.	Try
translateZ()	Reposition the element along the z-axis in 3D space.	Try
url()	It is used to include a file.	Try
var()	Insert a value for custom property.	Try

Best Practices for Using CSS Functions

Use Functions Appropriately: Apply CSS functions like calc(), var(), and rgb() to enhance flexibility and maintainability in your stylesheets.
Maintain Readability: While functions add power, ensure your code remains readable by avoiding overly complex expressions.
Test Across Browsers: Some CSS functions may have varying levels of support; always test your styles across different browsers to ensure compatibility.

PHP Ds\Set Functions Complete Reference

GeeksforGeeks

Improve

Article Tags :

CSS Functions Complete Reference

Best Practices for Using CSS Functions

Similar Reads

Thank You!

What kind of Experience do you want to share?