Skip to main content

CSS Functions that work without arguments

Do you know that some CSS functions can be used without arguments?

This is the case with circle() and ellipse() of clip-path. No need to provide any argument and they will, by default, round your element. circle() is a particular case of the ellipse() and is useful with square elements.

clip-path circle and ellipse

The browser will default circle() to circle(closest-side at center) and ellipse() to ellipse(closest-side closest-side at center)

See the Pen clip-path: circle()/ellipse() by Temani Afif (@t_afif) on CodePen.

The filter functions can also be used without arguments. Most of them have no effect on the element except for invert(), grayscale(), and sepia()

CSS filter function (sepia, grayscale and invert)

You can invert the colors of your image, turn it into black & white, or make it sepia without the need to remember the values you have to provide to each function.

See the Pen filter: invert()/grayscale()/sepia() by Temani Afif (@t_afif) on CodePen.