• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Image Filters

← Previous Next →

🔹 What are CSS Image Filters?

CSS Image Filters are visual effects applied to images (or other elements) using the filter property. They allow you to adjust colors, blur, brightness, contrast, and more, directly in CSS without editing the image itself.

🔸 Common CSS Filter Functions

Filter Function Description Example
blur(px) Applies blur effect filter: blur(5px);
brightness(%) Adjusts brightness (0% = black) filter: brightness(150%);
contrast(%) Adjusts contrast (100% = default) filter: contrast(200%);
grayscale(%) Converts to grayscale (100% = full gray) filter: grayscale(100%);
invert(%) Inverts colors (100% = full inversion) filter: invert(100%);
opacity(%) Sets opacity level filter: opacity(50%);
saturate(%) Adjusts saturation filter: saturate(200%);
sepia(%) Applies sepia tone filter: sepia(80%);
drop-shadow(offsetX offsetY blurRadius color) Adds shadow filter: drop-shadow(5px 5px 5px black);

🔸 Example: Multiple Filters Combined

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

🔸 Using Filters with Transitions

img {
  transition: filter 0.5s ease;
}

img:hover {
  filter: brightness(150%) saturate(120%);
}

Practice Questions

Q1. Apply a 5px blur to all images.

Q2. Make images grayscale on hover.

Q3. Increase brightness to 120% on hover.

Q4. Add a drop shadow of 4px offset with black color.

Q5. Invert colors of an image completely.

Q6. Set image opacity to 60%.

Q7. Apply a sepia tone of 70%.

Q8. Saturate an image to 200% when hovered.

Q9. Combine grayscale and blur effects on images.

Q10. Use transition to animate filter changes smoothly.

CSS Image Filters Quiz

Q1: Which CSS property applies filters to images?

A. opacity
B. box-shadow
C. filter
D. background

Q2: What does filter: grayscale(100%) do?

A. Blurs the image
B. Converts the image to black and white
C. Inverts colors
D. Makes the image transparent

Q3: Which filter function adjusts image brightness?

A. blur()
B. brightness()
C. contrast()
D. saturate()

Q4: What is the effect of filter: invert(100%)?

A. Increases contrast
B. Makes the image blurry
C. Inverts the colors
D. Adds sepia tone

Q5: Which filter adds a shadow around the image?

A. box-shadow
B. drop-shadow
C. shadow
D. filter-shadow

Q6: How to smoothly animate filter changes on hover?

A. Use animation property
B. Use transition: filter 0.5s ease;
C. Use transform
D. Use opacity

Q7: Which filter function adjusts color saturation?

A. brightness()
B. saturate()
C. sepia()
D. grayscale()

Q8: What does filter: opacity(50%) do?

A. Makes image half transparent
B. Sets 50% opacity
C. Increases brightness
D. No effect

Q9: Can multiple filter functions be combined?

A. No
B. Yes, by separating them with spaces
C. Only two at a time
D. Only in SVG

Q10: Which filter gives a warm brownish effect?

A. invert()
B. grayscale()
C. sepia()
D. blur()
← Previous Next →
Login
Go Back Top