Open In App

CSS Functions Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.
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



Last Updated : 07 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads