```
@@ -115,6 +115,40 @@ p {
:::
+## The `box-shadow` Property
+
+- **Definition**: The `box-shadow` property applies one or more shadows around an element.
+- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit.
+- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow.
+- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`.
+- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions.
+- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside.
+- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back.
+
+### Syntax
+
+```css
+box-shadow: offset-x offset-y blur-radius spread-radius color;
+```
+
+:::interactive_editor
+
+```html
+
+
Shadow Color Example
+```
+
+```css
+.shadow-box {
+ width: 200px;
+ padding: 20px;
+ background-color: lightblue;
+ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+}
+```
+
+:::
+
## Linear and Radial Gradients
- **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line using keywords like `to top`, `to right`, `to bottom right`, or angles like `45deg`. You can use any valid CSS color and as many color stops as you would like.
diff --git a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md
index 8c2aa8aa4f9..a451911e365 100644
--- a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md
+++ b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md
@@ -217,7 +217,42 @@ Review the concepts below to prepare for the upcoming exam.
- **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color.
- **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color.
- **`hsla()` Function**: This function adds a fourth value — alpha — that controls the opacity of the color.
-- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F.
+- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F.
+
+## `box-shadow` Property
+
+- **Definition**: The `box-shadow` property applies one or more shadows around an element.
+- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit.
+- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow.
+- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`.
+- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions.
+- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside.
+- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back.
+
+### Syntax
+
+```css
+box-shadow: offset-x offset-y blur-radius spread-radius color;
+```
+
+:::interactive_editor
+
+```html
+