Skip to content
Related Articles

Related Articles

CSS Functions Complete Reference

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 23 Nov, 2022
Improve Article
Save Article

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 are given below:

CSS Functions 

Description

CSS attr() Function The attr() function is an inbuilt function in CSS at returns the value of an attribute of the selected elements.
CSS calc() Function The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.
CSS cubic-bezier() Function The cubic-bezier() function is an inbuilt function in CSS that is used to define a Cubic Bezier curve. 
CSS hsl() Function The hsl() function is an inbuilt function in CSS that is used to define the colors using the Hue-saturation-lightness model (HSL).
CSS hsla() Function The hsla() function is an inbuilt function in CSS that is used to define the colors using the Hue Saturation Lightness Alpha (HSLA) model.
CSS linear-gradient() Function The linear-gradient() function is an inbuilt function in CSS that is used to set the linear gradient as the background image.
CSS radial-gradient() Function The radial-gradient() function is an inbuilt function in CSS that is used to set a radial gradient as the background image.
CSS attr() Function The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.
CSS calc() Function The calc() function is an inbuilt function in CSS that is used to perform calculations based on CSS property.
CSS cubic-bezier() Function The cubic-bezier() function is an inbuilt function in CSS that is used to define a Cubic Bezier curve. 
CSS hsl() Function The hsl() function is an inbuilt function in CSS that is used to define the colors using the Hue-saturation-lightness model (HSL).
CSS hsla() Function The hsla() function is an inbuilt function in CSS that is used to define the colors using the Hue Saturation Lightness Alpha (HSLA) model.
CSS linear-gradient() Function The linear-gradient() function is an inbuilt function in CSS that is used to set the linear gradient as the background image.
CSS radial-gradient() Function The radial-gradient() function is an inbuilt function in CSS that is used to set a radial gradient as the background image

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!