Filters in CSS

« Prev Next »

CSS filters are special graphical effects like blur, brightness, contrast, grayscale, sepia, hue rotation and many others.


Filters are mostly used to apply effects to images. However, it can also be used to add text effects or even background colors and elements.

css-filters

Syntax

filter: filter-function(value);
  • filter-function: The type of filter you want to apply (e.g., blur, grayscale, sepia, etc.).
  • value: The parameter value for the filter function (e.g., 5px for blur, 50% for grayscale).

Common CSS Filters and Their Functions

Blur

The blur() function applies a Gaussian blur effect to the element. The value specifies the radius of the blur (in pixels).

 

 filter: blur(5px);

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blur Effect</title>
  <style>
    img {
      width: 300px;
      height: 200px;
      filter: blur(5px); /* Apply blur effect */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image with Blur Effect">
</body>
</html>
Run ›

Brightness

The brightness() function adjusts the brightness of an element. Values greater than 1 will make the element brighter, and values less than 1 will make it darker.

 

filter: brightness(1.5); /* Makes the element 50% brighter */

Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brightness Effect</title>
  <style>
    img {
      width: 300px;
      height: 200px;
      filter: brightness(1.5); /* Increase brightness by 50% */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image with Brightness Effect">
</body>
</html>
Run ›

Contrast

The contrast() function adjusts the contrast of an element. Values greater than 1 increase the contrast, while values less than 1 decrease the contrast.

filter: contrast(2); /* Double the contrast */

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contrast Effect</title>
  <style>
    img {
      width: 300px;
      height: 200px;
      filter: contrast(0.5); /* Reduce contrast by 50% */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image with Contrast Effect">
</body>
</html>
Run ›

Grayscale

The grayscale() function converts the element to grayscale (black and white). The value is a percentage between 0% (original colors) and 100% (completely grayscale).

 

filter: grayscale(100%);

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grayscale Effect</title>
  <style>
    img {
      width: 300px;
      height: 200px;
      filter: grayscale(100%); /* Apply full grayscale */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image with Grayscale Effect">
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.