From 11b93bb17e5477ef7b644209ad1cff12dd0c901e Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Fri, 24 Oct 2025 04:26:03 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to css filter
lesson (#63015)
---
.../672bccebe1fc82d911c3f078.md | 68 +++++++++++++++++--
1 file changed, 61 insertions(+), 7 deletions(-)
diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
index 02987aca7b0..610bbd383e4 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-css-filter-property
---
-# --description--
+# --interactive--
The CSS `filter` property is a powerful tool that allows you to apply graphical effects to elements on a web page. It's particularly useful for adjusting the visual presentation of images, backgrounds and even text without modifying the original asset.
@@ -19,62 +19,116 @@ selector {
Here `function` represents the specific filter effect you want to apply, and `amount` is typically a value that determines the intensity of the effect. Now let's look at some common filter functions and their uses.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
img {
- filter: blur(5px);
+ filter: blur(2px);
}
```
+:::
+
The `blur` function applies a gaussian blur to the element, the amount is specified in pixels and represents the radius of the blur. This CSS rule will apply a 5 pixel blur to all images on the page. The `blur` effect can be useful for creating depth in your design or for obscuring parts of an image.
The `brightness` function adjusts the brightness of the element. A value of `0%` will make the element completely black, while values over `100%` will increase the brightness.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
-.bright-image {
+img {
filter: brightness(150%);
}
```
+:::
+
This CSS rule increases the brightness of elements with the class `bright-image` by `50%`. Brightness adjustments can be used to make images pop or create a washed-out effect.
The `grayscale` function converts the element to grayscale. The amount is defined as a percentage, where `100%` is completely grayscale and `0%` leaves the image unchanged.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
-.gray-image {
+img {
filter: grayscale(100%);
}
```
+:::
+
This rule will convert elements with the class `gray-image` to complete grayscale. `grayscale` can be used to create a vintage look or de-emphasize certain elements on a page.
The `sepia` function applies a sepia tone to the element. Like grayscale, it uses a percentage value:
+:::interactive_editor
+
+```html
+
+
+```
+
```css
-.old-photo {
+img {
filter: sepia(80%);
}
```
+:::
+
This rule applies an `80%` sepia effect to elements with the class `old-photo`. The sepia effect is great for creating a vintage or old-timey look.
The `hue-rotate` function applies the hue rotation to the element. The value is defined in degrees, and represents a rotation around the color circle.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
-.color-shift {
+img {
filter: hue-rotate(90deg);
}
```
+:::
+
This rule rotates the hue of elements with the class `color-shift` by `90` degrees. Hue rotation can be used to create psychedelic effects or to adjust the overall color scheme of an image.
One of the most powerful aspects of the `filter` property is the ability to combine multiple effects. You can apply several filters to the same element by separating them with spaces:
+:::interactive_editor
+
+```html
+
+
+```
+
```css
-.multi-filter {
+img {
filter: contrast(150%) brightness(110%) sepia(30%);
}
```
+:::
+
This rule applies increased contrast, slightly increased brightness, and a subtle sepia effect to elements with the class `multi-filter`.
By combining filters you can create complex and unique visual effects tailored to your design needs. The CSS filter property is a versatile tool that allows for creative visual manipulation of web elements.
+```
+
```css
img {
- filter: blur(5px);
+ filter: blur(2px);
}
```
+:::
+
The `blur` function applies a gaussian blur to the element, the amount is specified in pixels and represents the radius of the blur. This CSS rule will apply a 5 pixel blur to all images on the page. The `blur` effect can be useful for creating depth in your design or for obscuring parts of an image.
The `brightness` function adjusts the brightness of the element. A value of `0%` will make the element completely black, while values over `100%` will increase the brightness.
+:::interactive_editor
+
+```html
+
+