Open In App
Related Articles

CSS Functions Complete Reference

Improve Article
Improve
Save Article
Save
Like Article
Like

CSS functions are used to set the various CSS property. For example, the attr() function is used to retrieve the value of the HTML attribute. 

 

Example: Below example illustrates the radial-gradient() function in CSS:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image: radial-gradient(#090, #fff, #2a4f32);
        }
  
        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
  
        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

 

The complete list of CSS Functions is given below:

Functions 

Description

Example

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

Last Updated : 07 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials