CSS Filter Effects Practice Questions with Solutions

By /

Introduction

CSS Filter Effects allow you to visually modify images and other elements without changing the original file. The filter property can create effects such as blur, brightness, contrast, grayscale, sepia, inversion, and opacity. These effects are useful for image galleries, hover effects, disabled states, creative designs, and modern user interfaces. In this chapter, you’ll practice common CSS Filter Effects practice questions with solutions functions through simple solved questions.

Question 1: Apply a Grayscale Effect

Problem Statement

Write CSS to make an image completely grayscale.

CSS Code

img {
    filter: grayscale(100%);
}

Output

The image appears without its original colors.

Explanation

  • grayscale() controls the amount of grayscale.
  • 100% produces a completely grayscale image.
  • 0% keeps the original colors.

Question 2: Make an Image Brighter

Problem Statement

Write CSS to make an image 50% brighter than its normal brightness.

CSS Code

img {
    filter: brightness(150%);
}

Output

The image appears significantly brighter than the original.

Explanation

  • brightness() controls the brightness of an element.
  • 100% represents the normal brightness.
  • Values greater than 100% increase brightness.
  • Values below 100% reduce brightness.

Question 3: Reduce Image Brightness

Problem Statement

Write CSS to make an image darker by reducing its brightness to 70%.

CSS Code

img {
    filter: brightness(70%);
}

Output

The image appears darker than the original.

Explanation

  • brightness(70%) reduces the brightness.
  • 100% is the normal level.
  • Lower percentages create a darker appearance.

Question 4: Increase Image Contrast

Problem Statement

Write CSS to increase the contrast of an image to 150%.

CSS Code

img {
    filter: contrast(150%);
}

Output

The image has stronger differences between light and dark areas.

Explanation

  • contrast() controls the difference between light and dark areas.
  • 100% represents the original contrast.
  • Values above 100% increase contrast.
  • Values below 100% reduce contrast.

Question 5: Apply a Blur Effect

Problem Statement

Write CSS to apply a 5px blur to an image.

CSS Code

img {
    filter: blur(5px);
}

Output

The image appears visibly blurred.

Explanation

  • blur() applies a Gaussian blur effect.
  • The value represents the blur radius.
  • A larger value generally creates a stronger blur effect.

Question 6: Apply a Sepia Effect

Problem Statement

Write CSS to give an image a strong sepia effect.

CSS Code

img {
    filter: sepia(100%);
}

Output

The image gets a warm brown, vintage-style appearance.

Explanation

  • sepia() applies a sepia tone to the element.
  • 100% applies the maximum sepia effect.
  • Lower percentages create a more subtle effect.

Question 7: Invert Image Colors

Problem Statement

Write CSS to completely invert the colors of an image.

CSS Code

img {
    filter: invert(100%);
}

Output

The image’s colors are inverted.

Explanation

  • invert() reverses the colors of an element.
  • 100% applies complete inversion.
  • 0% leaves the original colors unchanged.

Question 8: Reduce Image Opacity Using a Filter

Problem Statement

Write CSS to make an image appear 50% opaque using the filter property.

CSS Code

img {
    filter: opacity(50%);
}

Output

The image appears partially transparent.

Explanation

  • opacity() is one of the functions available inside the CSS filter property.
  • 50% makes the filtered result partially transparent.
  • The standalone opacity property can also be used when you don’t need a filter chain.

Question 9: Combine Multiple Filter Effects

Problem Statement

Write CSS to make an image grayscale, slightly brighter, and slightly blurred.

CSS Code

img {
    filter: grayscale(100%) brightness(120%) blur(2px);
}

Output

The image becomes:

  • Completely grayscale
  • 20% brighter
  • Slightly blurred

Explanation

Multiple filter functions can be written in the same filter declaration.

The effects are applied in the order in which they are written.

Question 10: Create a Hover Filter Effect

Problem Statement

Write CSS so that an image is grayscale normally and returns to full color when the user hovers over it.

CSS Code

img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

img:hover {
    filter: grayscale(0%);
}

Output

  • Normal state → grayscale image
  • Hover state → full-color image
  • The transition makes the change smoother

Explanation

  • grayscale(100%) removes the image’s colors.
  • grayscale(0%) restores the original colors.
  • transition creates a smooth visual change.
  • This technique is commonly used for galleries, portfolios, and team-member images.

Key Takeaways

  • The CSS filter property applies visual effects to elements.
  • grayscale() removes or reduces color.
  • brightness() controls brightness.
  • contrast() controls the difference between light and dark areas.
  • blur() creates a blur effect.
  • sepia() creates a vintage-style appearance.
  • invert() reverses colors.
  • opacity() can be used as a filter function.
  • Multiple filter functions can be combined in one declaration.
  • Filters can be combined with :hover and transition to create interactive effects.

Frequently Asked Questions (FAQs)

1. What is the CSS filter property?

The CSS filter property applies visual effects such as blur, grayscale, brightness, contrast, and color inversion to an element.

Example:

img {
    filter: grayscale(100%);
}

2. How do I make an image grayscale?

Use:

img {
    filter: grayscale(100%);
}

3. How do I blur an image using CSS?

Use the blur() function:

img {
    filter: blur(5px);
}

4. How can I make an image brighter?

Use brightness():

img {
    filter: brightness(150%);
}

Values above 100% increase brightness, while values below 100% reduce it.

5. Can multiple CSS filters be combined?

Yes. Multiple filter functions can be written in the same filter declaration.

img {
    filter: grayscale(100%) brightness(120%);
}

6. How do I create a grayscale-to-color hover effect?

Use a normal grayscale filter and remove it on hover:

img {
    filter: grayscale(100%);
}

img:hover {
    filter: grayscale(0%);
}

7. Does CSS filtering change the original image file?

No. CSS filters change how the element is visually rendered in the browser. They do not modify the original image file.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top