Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
RECAP
3.
Types of CSS Functions Continued
3.1.
Filter Functions
3.2.
brightness( )
3.2.1.
HTML
3.2.2.
CSS:
3.2.3.
Output
3.3.
blur( )
3.3.1.
HTML
3.3.2.
CSS:
3.3.3.
Output
3.4.
contrast( )
3.4.1.
HTML
3.4.2.
CSS
3.4.3.
Output:
3.5.
greyscale( )
3.5.1.
HTML
3.5.2.
CSS
3.5.3.
Output:
3.6.
invert( )
3.6.1.
HTML
3.6.2.
CSS
3.6.3.
Output:
3.7.
opacity( )
3.7.1.
HTML
3.7.2.
CSS
3.7.3.
Output
3.8.
saturate( )
3.8.1.
HTML
3.8.2.
CSS
3.8.3.
Output
3.9.
sepia( )
3.9.1.
HTML
3.9.2.
CSS
3.9.3.
Output
4.
drop-shadow( )
4.1.
HTML
4.2.
CSS
4.3.
Output:
5.
hue-rotate( )
5.1.
HTML
5.2.
CSS
5.3.
Output:
6.
Shape Functions
6.1.
circle( )
6.1.1.
HTML
6.1.2.
CSS
6.1.3.
Output:
6.2.
ellipse( )
6.2.1.
HTML
6.2.2.
CSS
6.2.3.
Output:
6.3.
inset( )
6.3.1.
HTML
6.3.2.
CSS
6.3.3.
Output
7.
Mathematical Functions
7.1.
calc( )
7.1.1.
HTML
7.1.2.
CSS
7.1.3.
Output
7.2.
min( ) and max( )
7.2.1.
HTML
7.2.2.
CSS
7.2.3.
Output
8.
Gradient Functions
8.1.
HTML
8.2.
CSS
8.3.
Output
9.
Grid Functions
10.
Animation Functions
11.
Frequently Asked Questions
11.1.
What are CSS functions?
11.2.
How are CSS functions different from regular functions?
11.3.
Name some common filter functions in CSS. 
11.4.
What are shape functions in CSS? Give examples.
11.5.
What is the clamp( ) function in CSS?
12.
Conclusion
Last Updated: Mar 27, 2024
Easy

CSS Functions- Part 2

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Hello Ninja, Welcome back. In the first part of this article, CSS Functions Part 1, we introduced what functions in CSS are. For a quick recap.

CSS Functions- Part 2

 CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts.

RECAP

We also saw that CSS functions differ from normals functions in the following ways:

  1. They are always predefined.
  2. They always give an output in the form of changes in the presentation of web pages. 


We learnt about the following CSS functions too:

  • rgb( ) and rgba( )
  • hsl( ) and hsla( )
  • :nth-child( ) and :nth-last-child( )
  • :nth-of-type( ) and :nth-last-of-type( )
  • scaleX( ), scaleY( ), scaleZ( ), scale3d( ) and scale( )
  • translateX( ), translateY(), translateZ(), translate3d(), and translate()
  • rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()
  • skewX( ), skewY( ) and skew( )


But remember we said that this isn’t all?

In this article, we’ll finally finish discussing some standard CSS functions.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Types of CSS Functions Continued

Filter Functions

What’s the first thing that comes to your mind when you hear filter? 

For me, it’s Instagram filters, and that’s kind of what filter functions in CSS are too!

Exciting, isn’t it? Let’s see what they are without any more delay. 

brightness( )

This function adjusts the brightness of an element. A percentage is passed as a parameter to the function which determines the brightness. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html> 

CSS:

.pic {
  height: 25%;
  width: 25%;
  filter: brightness(150%);
}
.original {
  height: 25%;
  width: 25%;
}

Output

brightness( )

blur( )

As the name suggests, this function blurs the element.

For example,

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html> 

CSS:

.pic {
  height: 25%;
  width: 25%;
  filter: blur(5px);
}
.original {
  height: 25%;
  width: 25%;
}

Output

blur( )

contrast( )

This function modifies the contrast between the light and the dark elements in an image. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
    height: 25%;
    width: 25%;
    filter: contrast(500%);
  }
  .original {
    height: 25%;
    width: 25%;
  }

Output:

contrast( )

greyscale( )

Almost everyone has fooled around with the greyscale filter on Instagram, so we probably already know that greyscale means removing all the colour from an image. Let’s see how it’s done in CSS using a function with our old example.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: grayscale(50%);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

greyscale( )

invert( )

This function inverts the colours in an image. For example, white (rgb(255,255,255)) will become black (rgb(0,0,0)) and red (rgb(255,0,0)) will become blue (rgb(0,0,255)).

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: invert(100%);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

invert( )

opacity( )

We have already seen how we can modify the opacity of coloured elements by adding the alpha value to them. The same can be done for images, too, as shown below.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: opacity(50%);
}
.original {
  height: 25%;
  width: 25%;
}

Output

opacity( )

 

saturate( )

This function changes the intensity of the colours in the image. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: saturate(50%);
}
.original {
  height: 25%;
  width: 25%;
}

Output

saturate( )

sepia( )

This function is the CSS counterpart of everyone’s favourite filter, making a picture look old fashioned. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: sepia(100%);
}
.original {
  height: 25%;
  width: 25%;
}

Output

sepia( )

drop-shadow( )

This function is used to create a shadow of an image to give a 3-D effect. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: drop-shadow(10px 10px 0.2rem #ff9e20);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

drop-shadow( )

hue-rotate( )

This method is used to shift the hue of each pixel in an image by the amount specified as the parameter. 

For example, if we rotate the hue by 90 degrees in the picture of the C, orange will become green and green will become blue. (red --> 90deg rotate -->green --> 180 degree rotate --> blue --> 180 degree rotate --> red).

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  filter: hue-rotate(90deg);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

hue-rotate( )

Shape Functions

When we view someone’s profile on Facebook or even Instagram, their profile picture is displayed inside a circle. Using the shape functions in CSS, we can do it ourselves! Let’s see how. 

circle( )

This function creates a circular mask for an image. In other words, a picture is displayed inside a circle, as shown below.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  clip-path: circle(50%);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

circle( )

ellipse( )

This function gives a similar output as the circle( ), except an elliptical mask is made for the image.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  clip-path: ellipse(20vw 10vw at 50% 50%);
}
.original {
  height: 25%;
  width: 25%;
}

Output:

ellipse( )

inset( )

This function masks an image in the shape of a rectangle. Notice that by masking, we are cropping the image and not changing the size.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: 25%;
  clip-path: inset(25% 25% 10px 3vw);
}
.original {
  height: 25%;
  width: 25%;
}

Output

inset( )

Mathematical Functions

No matter how much we don’t like Maths, it never really leaves us alone, does it? Well, look here’s again - mathematical functions in CSS, but wait, isn’t that a good thing? Now we won’t have to do the maths ourselves since there are functions for the same!

calc( )

This function is most commonly used to size and scale elements to their original size. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: calc(25% + 5rem);
}
.original {
  height: 25%;
  width: 25%;
}

Output

calc( )

min( ) and max( )

As in normal programming languages, the min( ) and max( ) functions find the smallest and largest values of the two parameters passed, respectively. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img src="codingninja.png" class="original"></img>
    <img src="codingninja.png" class="pic">
  </body>
</html>

CSS

.pic {
  height: 25%;
  width: min(100px, 30rem);
}
.original {
  height: 25%;
  width: 25%;
}

Output

min( ) and max( )

Gradient Functions

Do you know what the word gradient means in English?

If you guessed a gradual change, you are correct!

So, gradient functions are CSS functions that provide a gradual colour change, but doesn’t this remind you of something? 

That’s right, the Instagram logo!  

The Instagram logo is a perfect example of what the gradient function does. We can learn more about CSS gradients here.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
   

<body>

<div>
  <h1>
    Here we are using gradient colour.
  </h1>  
</div>

</body>
</html>


CSS

div {
    height: 500px;
     width: 500px;
    background: linear-gradient(to bottom, #0e2025 0%, #27e227 100%)
}
h1{
    color: #fff
}

 

Output

gradient function

Grid Functions

With the advancement of technology, web development has had its advances too. CSS grid is one of them. With its help, websites are optimised to display on any device and any browser correctly. Some grid functions are:

Function

Use

fit-content( )

This function is used to fit the content in a particular row or column by adjusting the size of the element or lines of text.

minmax( )

This function limits the width and height of rows and columns in grid rows and columns.

repeat( )

This function replicates the attributes of a row or a column in the grid layout.

Animation Functions

If we get the choice to read a short paragraph or watch an animation of it, which one will we choose?

I’m sure most of us will choose to watch the animation. So, adding visual effects to a web page is an important part of styling it. To do that, there are certain animation functions like steps( ), path( ) and cubic-bezier( ). We can learn more about CSS animations here

Frequently Asked Questions

What are CSS functions?

CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts.

How are CSS functions different from regular functions?

CSS functions differ from normal functions in the following ways. They are always predefined, and they always give an output in the form of changes in the presentation of web pages.

Name some common filter functions in CSS. 

Some common filter functions in CSS are:brightness( ), blur( ), contrast( ), greyscale( ), invert( ), opacity( ), saturate( ), sepia( ), drop-shadow( ) and hue-rotate( )

What are shape functions in CSS? Give examples.

Shape functions in CSS mask out or crop a portion of the image in shapes like a circle, ellipse, rectangle, or polygon. Examples of shape functions are:circle( ), ellipse( ), inset( ) and polygon( ).

What is the clamp( ) function in CSS?

The clamp( ) function uses three values: a minimum, ideal, and maximum. It is used to limit (or clamp) the size of an element between a minimum and maximum value while trying to keep the size ideal. 

Conclusion

At the end of this article, we end the two articles discussing CSS functions. Now we have a basic understanding of the different functions in CSS, but as always, this isn’t the end. 

Learning CSS is no fun unless and until you apply it. So let’s get our hands dirty and design a website ourselves with the help of all the functions we learned. 

If you want to learn more, then check out our articles.

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your coding ability, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

Previous article
CSS Functions| Part 1
Next article
CSS Shadows
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass