CSS Filters - text-effect Property

Previous
Next

CSS provides an extremely powerful tool that can help in addition of special visual effects to text, images, background, borders, etc. The filters are useful in adjusting the rendering of these aspects of a webpage.

In this chapter, we will discuss about each CSS filter in detail with examples.

  • The filter property can have value as none or one or more functions listed later in the chapter.

  • If no or an invalid parameter is passed to any function, it returns none.

  • The functions that accept the parameter value in percentage (%), also accepts the same value expreseed in decimal. For example, 55% can be passed as 0.55

  • Multiple functions can be passed to filter property; just that you need to add space between them.

  • When multiple functions is passed, these filters are applied in the order they are passed.

  • The same filter function can be repeated. For example: filter:blur(20px) hue-rotate(45deg) blur(15px).

Following is the list of functions that can be used with filter property:

Sr.No. Function Parameter Description Example
1

blur()

Radius of blue effect (px, rem, etc)

Applies a blur effect to the input image.

filter:blur(10px);
2

brightness()

Value is a percentage or a decimal(%). 0% - black image, 100% - no effect, over 100% - brightens element.

Adjusts the brightness of the element.

filter:brightness(62% | 0.62);
3

contrast()

Value is a percentage or a decimal(%). 0% - grey, 100% - no effect, over 100% - creates contrast.

Adjusts the contrast of the element.

filter:contrast(200%);
4

grayscale()

Value is a percentage or a decimal(%). 0% - no effect, 100% - completely grayscale.

Converts the element to grayscale.

filter:grayscale(80%);
5

drop-shadow()

Value specifies the horizontal and vertical offset, the blur radius, and the color of the shadow.

Applies a drop shadow effect to the element

filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
6

hue-rotate()

Value is an angle in degrees.

Applies a hue rotation to the element.

filter:hue-rotate(80deg);
7

invert()

Value is an angle in degrees.

Inverts the colors of the element.

filter: invert(75%);
8

opacity()

Value is a percentage. 0% - fully transparent, 100% - fully opaque.

Adjusts the transparency of the element.

filter: opacity(75%);
9

saturate()

Value is a percentage.

Adjusts the saturation of the element.

filter: saturate(200%);
10

sepia()

Value is a percentage.

Adjusts a sepia effect to the element.

filter: sepia(90%);
11

url()

Value is the path of XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

For applying SVG filters.

filter:url(svg-url#element-id);

CSS filter - blur()

The blur() function is used to add blur effects to the text or an image.

The function can have following value as parameter:

  • blur radius: specified as a <length> value. The greater the value, more will be the blur effect.

    • Default value is 0.

    • The function does not accept percentage value.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Blur effect </h2>
   <div>
      <h3 style="filter: blur(2px); font-size: 3rem;">Blur(5px)</h3>
      <img style="filter: blur(5px); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
   </div>
   <div>
      <h3 style="filter: blur(0.5rem); font-size: 3rem;">Blur(2rem)</h3>
      <h3>Blur(5px)</h3>
      <img style="filter: blur(5px); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
   </div>
   <div>
      <h3>Blur(2rem)</h3>
      <img style="filter: blur(2rem); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing blur effect">
   </div>
</body>
</html>

CSS filter - brightness()

brightness() function is used to add brightness effect to the text or an image, by applying a linear multiplier value. This makes the element look brighter or darker.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value less than 100%, makes the element darker.

    • Value over 100%, makes the element bright.

    • Value equal to 100% have no effect.

    • Default value is 1.

    • Negative values are not allowed.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Brightness effect </h2>
   <div>
      <h3 style="filter: brightness(120%); font-size: 2rem;">Brightness(120%)</h3>
      <img style="filter: brightness(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
   </div>
   <div>
      <h3 style="filter: brightness(0.38); font-size: 2rem;">Brightness(0.38)</h3>
      <h3>Brightness(120%)</h3>
      <img style="filter: brightness(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
   </div>
   <div>
      <h3>Brightness(0.38)</h3>
      <img style="filter: brightness(0.38); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing brightness effect">
   </div>
</body>
</html>

CSS filter - contrast()

contrast() function is used to add contrast effect to the text or an image.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value less than 100%, decreases the contrast.

    • Value over 100%, increases the contrast.

    • Value equal to 0% or 0, will make the element fully gray.

    • Value equal to 100% have no effect.

    • Default value is 1.

    • Negative values are not allowed.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Contrast effect </h2>
   <div>
      <h3 style="filter: contrast(20%); font-size: 2rem;">Contrast(120%)</h3>
      <img style="filter: contrast(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
   </div>
   <div>
      <h3 style="filter: contrast(0.5); font-size: 2rem;>Contrast(0.38)</h3>
      <h3>Contrast(120%)</h3>
      <img style="filter: contrast(120%); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
   </div>
   <div>
      <h3>Contrast(0.38)</h3>
      <img style="filter: contrast(0.38); width: 400px; height: 300px;" src="images/red-flower.jpg" alt="showing contrast effect">
   </div>
</body>
</html>

CSS filter - Drop Shadow Effect

Drop Shadow is a blurred version of the image, shown in a particular color below the specified image.

This property is similar to >box-shadow, which creates a rectangular shadow, whereas drop-shadow creates a shadow that is of the shape of the image itself.

The function can have following value as parameter:

  • offset-x:

    • Required parameter.

    • Horizontal offset value for shadow.

    • Specified as <length> value.

    • Negative values can be passed. Places the shadow to left of element.

  • offset-y:

    • Required parameter.

    • Vertical offset value for shadow.

    • Specified as <length> value.

    • Negative values can be passed. Places the shadow above the element.

  • blur-radius:

    • Optional parameter.

    • It is shadow's blur radius.

    • Specified as <length> value.

    • Larger the value, bigger is the blurred shadow.

    • Default is 0, if no value specified. The shadow will be sharp and unblurred.

    • Negative values not allowed.

  • color:

    • Optional parameter.

    • Any color value can be passed, such as color name, hex value, rgb value, etc.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Drop shadow effect</h2>
      <div style="margin-bottom: 1in;">
         <h3 style="filter: drop-shadow(20px 20px 20px blue); font-size: 3rem;">with blur radius</h3>
         <img style="filter: drop-shadow(20px 20px 20px blue);" width="200px;" height="200px;" src="images/white-flower.jpg" alt="drop-shadow effect">
      </div>
      <div>
         <h3 style="filter: drop-shadow(1rem 1rem green); font-size: 3rem;">without blur radius</h3>
         <img style="filter: drop-shadow(1rem 1rem green);" width="200px;" height="200px;" src="images/white-flower.jpg" alt="drop-shadow effect">
      </div>
</body>
</html>

CSS filter - grayscale()

grayscale() function is used to convert the input image to grayscale.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value equal to 100%, makes the input fully grayscale.

    • Value equal to 0% or 0, will make no change to the input.

    • Value between 0% and 100% have linear multipliers on the effect.

    • Default value is 1, if no parameter is passed.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Grayscale effect</h2>
      <div>
         <h3>grayscale - 0</h3>
         <img style="filter: grayscale(0);" src="images/white-flower.jpg" alt="grayscale effect">
      </div>
      <div>
         <h3>grayscale - 100</h3>
         <img style="filter: grayscale(100);" src="images/white-flower.jpg" alt="grayscale effect">
      </div>
      <div>
         <h3>grayscale - 70%</h3>
         <img style="filter: grayscale(70%);" src="images/white-flower.jpg" alt="grayscale effect">
      </div>
      <div>
         <h3>grayscale - 0.35</h3>
         <img style="filter: grayscale(.35);" src="images/white-flower.jpg" alt="grayscale effect">
      </div>
</body>
</html>

CSS filter - hue-rotate()

hue-rotate() function is used to rotate the hue of an input element and its contents.

The function can have following value as parameter:

  • angle: specified as an <angle> value.

    • Angle value can be passed in degress, gradians, radians, or turns.

    • Value equal to 0deg, will make no change to the input.

    • Positive hue rotation, increases hue value.

    • Negative hue rotation, decreases hue value.

    • Initial value is 0.

Note: The hue-rotate() function can be used with backdrop-filter CSS property, apart from the filter CSS property.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Hue-rotate effect</h2>
      <div>
         <h3>hue-rotate - 0.8turn</h3>
         <img style="filter: hue-rotate(0.8turn);" src="images/white-flower.jpg" alt="hue-rotate effect">
      </div>
      <div>
         <h3>hue-rotate - 65deg</h3>
         <img style="filter: hue-rotate(65deg);" src="images/white-flower.jpg" alt="hue-rotate effect">
      </div>
      <div>
         <h3>hue-rotate - 200grad</h3>
         <img style="filter: hue-rotate(200grad);" src="images/white-flower.jpg" alt="hue-rotate effect">
      </div>
      <div>
         <h3>hue-rotate - 3.5rad</h3>
         <img style="filter: hue-rotate(3.5rad);" src="images/white-flower.jpg" alt="hue-rotate effect">
      </div>
</body>
</html>

CSS filter - invert()

The invert() property is used to invert the color in the input image.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value equal to 100%, makes the input fully inverted.

    • Value equal to 0% or 0, will make no change to the input.

    • Value between 0% and 100% have linear multipliers on the effect.

    • Initial value is 0.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Invert effect</h2>
      <div>
         <h3>invert - 0</h3>
         <img style="filter: invert(0);" src="images/white-flower.jpg" alt="invert effect">
      </div>
      <div>
         <h3>invert - 65%</h3>
         <img style="filter: invert(65%);" src="images/white-flower.jpg" alt="invert effect">
      </div>
      <div>
         <h3>invert - .45</h3>
         <img style="filter: invert(0.45);" src="images/white-flower.jpg" alt="invert effect">
      </div>
      <div>
         <h3>invert - 100</h3>
         <img style="filter: invert(100);" src="images/white-flower.jpg" alt="invert effect">
      </div>
</body>
</html>

CSS filter - opacity()

The opacity() function is used to add transparency to the input element.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value equal to 0%, makes the input fully transparent.

    • Value equal to 100%, will make no change to the input.

    • Value between 0% and 100% have linear multipliers on the effect.

    • Initial value is 1.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Opacity effect</h2>
      <div style="border: 2px solid black; width: 250px; height: 250px;">
         <h3 style="filter: opacity(20%);">opacity - 0%</h3>
         <img style="filter: opacity(0%);" src="images/white-flower.jpg" alt="opacity effect">
      </div>
      <div>
         <h3 style="filter: opacity(0.55);">opacity - 55%</h3>
         <img style="filter: opacity(55%);" src="images/white-flower.jpg" alt="opacity effect">
      </div>
      <div>
         <h3>opacity - 100</h3>
         <img style="filter: opacity(100);" src="images/white-flower.jpg" alt="opacity effect">
      </div>
</body>
</html>

CSS filter - saturate()

The saturate() function is an inbuilt function provided by CSS and is used to super-saturate or desaturate the input image.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value under 100%, fully desaturates the image.

    • Value over 100%, super-saturates the image.

    • Value equal to 0%, makes the image completely unsaturated.

    • Value equal to 100%, has no effect on the image.

    • Initial value is 1.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Saturate effect</h2>
      <div>
         <h3>saturate - 0%</h3>
         <img style="filter: saturate(0%);" src="images/white-flower.jpg" alt="saturate effect">
      </div>
      <div>
         <h3>saturate - 0.8</h3>
         <img style="filter: saturate(0.8);" src="images/white-flower.jpg" alt="saturate effect">
      </div>
      <div>
         <h3>saturate - 100%</h3>
         <img style="filter: saturate(100%);" src="images/white-flower.jpg" alt="saturate effect">
      </div>
      <div>
         <h3>saturate - 250%</h3>
         <img style="filter: saturate(250%);" src="images/white-flower.jpg" alt="saturate effect">
      </div>
</body>
</html>

CSS filter - sepia()

The sepia() function is an inbuilt function provided by CSS and is used to add sepia effect to the input image, which is a more brighter and warmer look.

The function can have following value as parameter:

  • amount: specified as a <number> or a <percentage> value.

    • Value equal to 0%, has no effect.

    • Value equal to 100%, makes the image completely sepia.

    • Initial value is 0.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Sepia effect</h2>
      <div>
         <h3>sepia - 0%</h3>
         <img style="filter: sepia(0%);" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
      <div>
         <h3>sepia - 0.8</h3>
         <img style="filter: sepia(0.8);" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
      <div>
         <h3>sepia - 100%</h3>
         <img style="filter: sepia(100%);" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
</body>
</html>

CSS filter - URL()

Additionally, the filter property also supports the url() function, which allows you to apply a filter effect using an SVG filter element. For example:

filter: url(#myFilter);

This is useful when you want to apply more complex filter effects that are not available with the built-in filter functions.

Here is an example:

<html>
<head>
<style>
   .myelement {
      filter: url(#pink-flower);
   }
   div {
      gap: 1.5rem;
      max-width: 300px;
      margin: 2em auto;
   }
   h3 {
      margin-top: 0.5rem;
   }
   img {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
   }
   svg {
      height: 0;
   }
</style>
</head>
<body>
   <!-- SVG Filter effect -->
   <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
   <filter id="pink-flower" x="0" y="0" width="100%" height="100%">
   <feComponentTransfer>
   <feFuncR type="linear" slope="1" intercept="0.5"></feFuncR>
   <feFuncG type="linear" slope="0.5" intercept="0.5"></feFuncG>
   <feFuncB type="linear" slope="0" intercept="1"></feFuncB>
   </feComponentTransfer>
   </filter>
   </defs>
   </svg>
   <!-- Rest of HTML -->
   <div>
      <h3>filter: url() function</h3>
   <div>
      <img src="images/pink-flower.jpg" alt="pink flower" />
   </div>
   <div>
      <img src="images/pink-flower.jpg" alt="blurred pink flower" class="myelement" />
   </div>
   </div>
</body>
</html>

CSS filter - Combination of filters

Multiple filter functions can be used in one declaration. You just need to separate each function using a space.

Note: The order in which you pass the filter functions is important, as the filters are applied in the order they are declared. So for example, if you specify grayscale function after sepia, the image will look grayscale only.

Here is an example:

<html>
<head>
<style>
   img {
      width:200px;
      height:200px;
   }
</style>
</head>
<body>
   <h2>Combination of filters</h2>
      <div>
         <h3 style="filter: brightness(150) opacity(50%); font-size: 2rem;">sepia & saturate</h3>
         <img style="filter: sepia(0%) saturate(120%);" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
      <div>
         <h3 style="filter: contrast(150) opacity(50%); font-size: 2rem;>contrast & brightness</h3>
         <img style="filter: contrast(0.8) brightness(150%);" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
      <div>
         <h3 style="filter: brightness(20) contrast(10%); font-size: 2rem;">blur & drop-shadow</h3>
         <img style="filter: blur(2px) drop-shadow(20px 20px 15px rgb(169, 8, 35));" src="images/orange-flower.jpg" alt="sepia effect">
      </div>
</body>
</html>
Print Page
Previous
Next
Advertisements