diff --git a/docs/css/effects/backdrops.mdx b/docs/css/effects/backdrops.mdx
index e345ed2..c586bf4 100644
--- a/docs/css/effects/backdrops.mdx
+++ b/docs/css/effects/backdrops.mdx
@@ -1 +1,78 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "The backdrop-filter Property"
+description: "Master the CSS backdrop-filter property, which applies graphical effects (like blur, grayscale, and contrast) to the area behind a transparent element, enabling the Frosted Glass effect."
+keywords: [CSS backdrop filter, frosted glass, blur behind, visual effects, UI design, transparency]
+tags: [CSS backdrop-filter, frosted glass, blur behind, visual effects, UI design, transparency]
+sidebar_label: "backdrop-filter"
+---
+
+The `backdrop-filter` property is one of the most visually striking and modern CSS features. It allows you to apply any of the standard CSS filter functions (like `blur`, `grayscale`, `sepia`, etc.) to the content that sits *behind* the element.
+
+This is the key to creating the "Frosted Glass" or "Aero Glass" effect commonly seen in modern operating systems and user interfaces.
+
+<AdsComponent />
+<br />
+
+## 1. `backdrop-filter` vs. `filter`
+
+It is crucial to distinguish between the two filter properties:
+
+| Property | Target of the Effect | Use Case |
+| :--- | :--- | :--- |
+| **`filter`** | The element itself and all of its content. | Making an image grayscale or blurring a photo. |
+| **`backdrop-filter`** | The background content visible *through* the element's transparent areas. | Creating a translucent, blurred overlay panel. |
+
+## 2. Prerequisites for `backdrop-filter`
+
+For `backdrop-filter` to have any visual effect, the element it is applied to **must be transparent or translucent**. If the element is fully opaque (`background-color: white;`), you won't see the content behind it, and therefore, the filter will be invisible.
+
+The necessary ingredients for a successful frosted glass effect are:
+
+1.  **A background element** (the content that needs to be blurred).
+2.  **A foreground element** positioned above the background.
+3.  The foreground element must have a **semi-transparent background** (e.g., `rgba(255, 255, 255, 0.2)`).
+4.  The foreground element must have the `backdrop-filter` applied.
+
+## 3. Applying the Frosted Glass Effect
+
+The syntax for `backdrop-filter` is identical to the standard `filter` property; you simply use the same filter functions.
+
+### Example: Creating a Blur Effect
+
+```css title="title="styles.css"
+.frosted-panel {
+  /* Step 1: Make the element translucent */
+  background-color: rgba(255, 255, 255, 0.15); 
+  border: 1px solid rgba(255, 255, 255, 0.4); /* Add a light border for definition */
+  
+  /* Step 2: Apply the filter to the content behind the panel */
+  backdrop-filter: blur(12px) saturate(1.5); 
+  
+  /* Optional: Ensure cross-browser support */
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+}
+```
+
+<AdsComponent />
+<br />
+
+## 4. Common `backdrop-filter` Functions
+
+You can combine multiple filters for unique looks:
+
+| Effect | Function | Description |
+| :--- | :--- | :--- |
+| **Blur** | `blur(10px)` | Creates the classic frosted glass look. |
+| **Inversion** | `invert(1)` | Inverts colors behind the element (e.g., for a "dark mode" effect on bright content). |
+| **Grayscale** | `grayscale(0.8)` | Desaturates the background content behind the element. |
+| **Hue Rotation** | `hue-rotate(90deg)` | Shifts the colors of the content behind the element. |
+| **Contrast** | `contrast(0.7)` | Makes the background content less distinct. |
+
+## Interactive `backdrop-filter` Demo
+
+In this demo, the background image is static. The `.overlay-card` is semi-transparent, and the `backdrop-filter: blur()` applied to it makes the image visible through the card look blurred, while the text inside the card remains sharp and clear.
+
+<CodePenEmbed 
+  title="Interactive backdrop-filter Demo"
+  penId="jEqKrQQ"
+/>
\ No newline at end of file
diff --git a/docs/css/effects/clip-path.mdx b/docs/css/effects/clip-path.mdx
index e345ed2..407f9a4 100644
--- a/docs/css/effects/clip-path.mdx
+++ b/docs/css/effects/clip-path.mdx
@@ -1 +1,116 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "The clip-path Property"
+description: "Learn how to use the CSS clip-path property to clip an element to a specific shape (circle, polygon, inset), creating complex, non-rectangular designs."
+keywords: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions]
+tags: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions]
+sidebar_label: "clip-path"
+---
+
+The `clip-path` property allows you to define a specific geometric shape that an element's content should be clipped to. Only the part of the element that is inside the shape is visible; everything outside is completely cut off.
+
+This powerful property moves CSS beyond the constraints of the rectangular box model, enabling the creation of custom, dynamic shapes for images, containers, and interactive elements.
+
+<AdsComponent />
+<br />
+
+## 1. Core Concept
+
+`clip-path` uses various shape functions to define a clipping region. Anything outside this region is treated as transparent and non-interactive.
+
+### `clip-path` vs. `overflow: hidden`
+
+* **`overflow: hidden`:** Hides content that exceeds the rectangular boundaries of the element's box. The box itself remains a rectangle.
+* **`clip-path`:** Changes the *visible shape* of the element itself, even if the content remains within the original box's boundaries. The element's background, borders, and content are all clipped to the shape.
+
+
+## 2. Supported Shape Functions
+
+`clip-path` accepts several built-in shape functions, with `polygon()` being the most versatile.
+
+### 2.1. `inset()` (The Rounded Rectangle)
+Clips the element inward from its edges. This is similar to a padded box, but it clips the visual output.
+
+```css title="styles.css"
+/* Clips 10px from top, 20px from right, 30px from bottom, 40px from left */
+clip-path: inset(10px 20px 30px 40px);
+
+/* Can also be combined with border-radius */
+clip-path: inset(10% round 15px); 
+```
+
+### 2.2. `circle()`
+
+Clips the element to a circular shape.
+
+```css title="styles.css"
+/* Creates a circle with a radius of 50% centered at 50% 50% */
+clip-path: circle(50% at 50% 50%); 
+```
+
+<AdsComponent />
+<br />
+
+### 2.3. `ellipse()`
+
+Clips the element to an oval shape, defined by two radii (X and Y).
+
+```css title="styles.css"
+/* Creates an ellipse with horizontal radius 30% and vertical radius 40%, centered at 50% 50% */
+clip-path: ellipse(30% 40% at 50% 50%); 
+```
+
+### 2.4. `polygon()` (Custom Shapes)
+
+This is the function used for complex and custom shapes. It requires a list of coordinates (X Y pairs) that define the vertices (corners) of the shape. Coordinates are relative to the top-left corner of the element (0% 0%).
+
+```css title="styles.css"
+/* Creates a basic downward arrow shape */
+clip-path: polygon(
+  50% 0%,       /* Top Center */
+  100% 100%,    /* Bottom Right */
+  0% 100%       /* Bottom Left */
+);
+```
+
+## 3. Animating with `clip-path`
+
+One of the most powerful uses of `clip-path` is for transitions and animations. As long as the two states (start and end) have the same number of points in their `polygon()` definitions, the browser can smoothly interpolate between the shapes.
+
+### Example: Rectangle to Starburst
+
+```css title="styles.css"
+.starburst-box {
+  /* Starting shape: a simple rectangle (4 points) */
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+  transition: clip-path 0.5s ease;
+}
+
+.starburst-box:hover {
+  /* Ending shape: A starburst/diamond shape (4 points) */
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+```
+
+:::warning Point Count is Key
+If you are transitioning between two `polygon()` shapes, they **must** define the same number of coordinates. For instance, transitioning from a triangle (3 points) to a hexagon (6 points) will typically fail or produce unpredictable results.
+:::
+
+<AdsComponent />
+<br />
+
+## 4. Interaction Caveats
+
+When you clip an element, the invisible clipped area is also **non-interactive**.
+
+If you clip an image into a circle, only the pixels within the circle will respond to mouse events (like `click` or `hover`). The corners of the original rectangle, though still technically taking up space in the layout, are completely inert.
+
+This is a crucial difference from using transparent backgrounds, where the mouse still interacts with the full bounding box.
+
+## Interactive `clip-path` Demo
+
+Use the hover state to see a smooth transition between a square and a diamond/starburst shape using `polygon()`.
+
+<CodePenEmbed 
+  title="Interactive clip path Demo"
+  penId="PwNazWm"
+/>
\ No newline at end of file
diff --git a/docs/css/effects/filters-and-blend.mdx b/docs/css/effects/filters-and-blend.mdx
index e345ed2..a99ae3c 100644
--- a/docs/css/effects/filters-and-blend.mdx
+++ b/docs/css/effects/filters-and-blend.mdx
@@ -1 +1,117 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "Filters and Blend Modes"
+description: "Explore CSS Filters (grayscale, blur, sepia) for visual adjustments and Blend Modes (multiply, screen, overlay) for creative layering and composite effects on elements."
+keywords: [CSS Filters, CSS Blend Modes, backdrop-filter, mix-blend-mode, background-blend-mode, visual effects, image processing]
+tags: [CSS Filters, CSS Blend Modes, backdrop-filter, mix-blend-mode, background-blend-mode, visual effects, image processing]
+sidebar_label: "Filters & Blend Modes"
+---
+
+CSS provides two powerful sets of properties—Filters and Blend Modes—to manipulate the visual appearance of elements directly in the browser, offering effects previously only possible in graphic editing software.
+
+<AdsComponent />
+<br />
+
+## 1. CSS `filter` Property
+
+The `filter` property applies visual effects to an element (usually an image or video), changing its appearance. The element remains in the document flow, but its rendering is visually altered.
+
+### 1.1. Common Filter Functions
+
+Filters are applied as a space-separated list of functions.
+
+| Function | Parameter | Description |
+| :--- | :--- | :--- |
+| `grayscale()` | Percentage or `0-1` | Converts the element to shades of gray. |
+| `sepia()` | Percentage or `0-1` | Gives the element an old, brownish tone. |
+| `blur()` | Length (e.g., `5px`) | Blurs the image. Higher value means more blur. |
+| `brightness()` | Percentage or `0-1` | Adjusts the brightness. `1` is normal, `2` is double. |
+| `contrast()` | Percentage or `0-1` | Adjusts the contrast. `1` is normal. |
+| `hue-rotate()` | Angle (e.g., `90deg`) | Rotates the color wheel by the specified angle. |
+| `drop-shadow()` | Shadow values | Applies a blurred shadow to the shape of the content (unlike `box-shadow`). |
+
+### 1.2. Applying Multiple Filters
+
+You can chain multiple filters together to create complex effects:
+
+```css title="styles.css"
+/* Converts to 50% grayscale, increases contrast by 150%, and blurs the edges */
+.vintage-photo {
+  filter: grayscale(0.5) contrast(1.5) blur(2px);
+  transition: filter 0.5s;
+}
+
+/* On hover, remove all filters smoothly */
+.vintage-photo:hover {
+  filter: none;
+}
+```
+
+<AdsComponent />
+<br />
+
+## 2. CSS `backdrop-filter` Property (The Glass Effect)
+
+The `backdrop-filter` property applies a graphic effect to the area *behind* an element. This is famous for creating the "frosted glass" or "blur-behind" effect used in modern UIs.
+
+The element itself remains clear, but the content rendered behind it is filtered.
+
+:::tip Browser Support
+While `filter` is universally supported, `backdrop-filter` historically required vendor prefixes (`-webkit-backdrop-filter`) but is now widely supported in modern browsers.
+:::
+
+### Example: Frosted Glass Panel
+
+```css title="styles.css"
+.frosted-panel {
+  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
+  
+  /* Blurs the content rendered underneath this element */
+  backdrop-filter: blur(10px) saturate(1.8); 
+  
+  border-radius: 10px;
+  padding: 20px;
+}
+```
+
+## 3. CSS Blend Modes
+
+Blend modes define how an element's color should combine with the color of the element directly underneath it. They are derived from concepts used in tools like Photoshop and GIMP.
+
+### 3.1. `mix-blend-mode` (Element Blending)
+
+`mix-blend-mode` defines how the entire element blends with the content behind it.
+
+| Value | Description | Use Case |
+| :--- | :--- | :--- |
+| `normal` (Default) | No blending. | |
+| **`multiply`** | Multiplies colors, resulting in a darker image. Excellent for shadows or darkening backgrounds. | Overlaying text on an image while maintaining texture. |
+| **`screen`** | Multiplies the inverse of the colors, resulting in a lighter image. Good for highlights. | Creating glow effects. |
+| **`overlay`** | Combines `multiply` and `screen` to preserve highlights and shadows. | Adjusting contrast or applying color gradients for stylistic tone. |
+| `difference` | Subtracts the darker pixel from the lighter pixel. | Inverting colors for dramatic effects. |
+
+### 3.2. `background-blend-mode` (Background Layer Blending)
+
+`background-blend-mode` is used when an element has both a `background-color` and a `background-image` (or multiple background images). It controls how those background layers blend with each other.
+
+```css title="styles.css"
+.blended-background {
+  /* Image and color layers */
+  background-image: url('noise.png'), linear-gradient(to right, red, blue);
+  background-color: yellow; 
+  
+  /* Blends the noise image with the gradient, and the result with the yellow color */
+  background-blend-mode: overlay, multiply; 
+}
+```
+
+<AdsComponent />
+<br />
+
+## Interactive Filters and Blend Modes Demo
+
+This demo shows an image card. On hover, we apply a complex filter chain (`grayscale` + `contrast`) and use `mix-blend-mode` to create a cool effect where the text interacts with the image behind it.
+
+<CodePenEmbed 
+  title="Interactive Filters and Blend Modes Demo"
+  penId="yyOEJeE"
+/>
\ No newline at end of file
diff --git a/docs/css/effects/mask.mdx b/docs/css/effects/mask.mdx
index e345ed2..51e1777 100644
--- a/docs/css/effects/mask.mdx
+++ b/docs/css/effects/mask.mdx
@@ -1 +1,118 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "CSS Masking (mask, mask-image)"
+description: "Explore advanced CSS masking techniques, using images, gradients, or SVG shapes as masks to control the transparency and visibility of an element."
+keywords: [CSS mask, mask-image, masking, alpha mask, luminance mask, SVG mask, image transparency]
+tags: [CSS mask, mask-image, masking, alpha mask, luminance mask, SVG mask, image transparency]
+sidebar_label: mask
+---
+
+CSS Masking is a powerful technique that uses a graphic (like an image, gradient, or SVG shape) to precisely control which parts of an element are visible.
+
+Unlike `opacity` (which applies uniform transparency) or `clip-path` (which cuts to a fixed geometry), masking uses the pixels of the mask image itself—specifically, their luminance or alpha channel—to define the transparency level of the masked element.
+
+<AdsComponent />
+<br />
+
+## 1. Core Concept: How Masks Work
+
+A mask image defines a transparency map for the target element. There are two main ways a mask interprets the graphic:
+
+### A. Luminance Mask (Most Common)
+
+* **White** areas of the mask image result in the target element being **fully opaque** (visible).
+* **Black** areas of the mask image result in the target element being **fully transparent** (invisible).
+* **Gray** areas result in semi-transparency.
+
+### B. Alpha Mask
+
+* The mask uses the alpha (transparency) channel of the mask image.
+* Fully opaque areas of the mask image reveal the target element.
+* Fully transparent areas of the mask image hide the target element.
+
+## 2. The `mask-image` Property
+
+The `mask-image` property specifies the mask source, which can be an image file or a CSS gradient.
+
+### 2.1. Using a Gradient as a Mask
+Gradients are perfect for masking because they naturally create areas of black and white/transparent.
+
+```css title="styles.css"
+.fading-text {
+  /* The element we want to mask */
+  color: purple;
+  font-size: 3rem;
+  
+  /* Mask uses a linear gradient that goes from black (fully visible) 
+     to transparent (fully invisible) */
+  mask-image: linear-gradient(to right, black, transparent);
+}
+```
+
+In this example, the text would fade out smoothly from left to right.
+
+<AdsComponent />
+<br />
+
+### 2.2. Using an Image as a Mask
+
+You can use a PNG, JPG, or SVG file as the mask. For the luminance effect, black-and-white shapes work best.
+
+```css title="styles.css"
+.target-image {
+  /* The content that will be masked */
+  background: url('hero.jpg') no-repeat center / cover;
+  
+  /* Use an SVG shape (like a star or cloud) as the mask */
+  mask-image: url('star_mask.svg');
+  
+  /* Control how the mask image behaves (similar to background-repeat/size) */
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
+```
+
+## 3. The `mask` Shorthand
+
+The `mask` shorthand property combines multiple masking properties (like `mask-image`, `mask-size`, `mask-repeat`, and `mask-position`) into one declaration, similar to the `background` shorthand.
+
+### Example: Repeated Pattern Mask
+
+This example creates a repeated diagonal stripe pattern to hide parts of an element.
+
+```css title="styles.css"
+.striped-mask {
+  background-color: blue;
+  
+  mask: repeating-linear-gradient(
+    45deg, 
+    black 0px, black 10px,   /* Visible Stripe */
+    transparent 10px, transparent 20px /* Invisible Stripe */
+  );
+  
+  mask-size: 50px 50px; /* Size of the repeated unit */
+}
+```
+
+<AdsComponent />
+<br />
+
+## 4. `mask-mode` and Advanced Use
+
+The `mask-mode` property explicitly controls how the mask source is interpreted (as luminance or alpha).
+
+| Value | Description |
+| :--- | :--- |
+| **`alpha`** | Uses the transparency (alpha channel) of the mask image. |
+| **`luminance`** | Uses the brightness (grayscale value) of the mask image. |
+| `auto` (Default) | Browser decides based on the image type (e.g., usually luminance for gradients, alpha for external PNGs). |
+
+For most simple effects (gradients or simple black/white images), the default `auto` behavior works fine, usually resulting in a luminance mask.
+
+## Interactive Masking Demo
+
+This demo uses a radial gradient as a mask to create a spotlight effect on the text. The text fades out towards the edges of the box.
+
+<CodePenEmbed 
+  title="Interactive Masking Demo"
+  penId="NPNzrMM"
+/>
\ No newline at end of file
diff --git a/docs/css/effects/opacity.mdx b/docs/css/effects/opacity.mdx
index e345ed2..7cff430 100644
--- a/docs/css/effects/opacity.mdx
+++ b/docs/css/effects/opacity.mdx
@@ -1 +1,102 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "The opacity Property in CSS"
+description: "Learn how to use the CSS opacity property to control the transparency or translucency of an element, making it semi-transparent or completely invisible."
+keywords: [CSS opacity, transparency, translucency, alpha channel, visibility, performance]
+tags: [CSS opacity, transparency, translucency, alpha channel, visibility, performance]
+sidebar_label: opacity
+---
+
+The `opacity` property in CSS is used to define the transparency level of an element. It ranges from `0.0` (fully transparent/invisible) to `1.0` (fully opaque/solid).
+
+Unlike using colors with transparency (like `rgba()`), `opacity` affects the **entire element**, including its content, text, images, and borders.
+
+<AdsComponent />
+<br />
+
+## 1. Syntax and Values
+
+The `opacity` property accepts a single decimal number between 0 and 1.
+
+| Value | Description |
+| :--- | :--- |
+| **`1.0` (Default)** | The element is completely opaque (solid). |
+| **`0.5`** | The element is 50% transparent (translucent). |
+| **`0.0`** | The element is completely transparent (invisible). |
+
+### Example
+
+```css title="styles.css"
+/* Fully solid */
+.solid { opacity: 1; } 
+
+/* Half transparent */
+.translucent { opacity: 0.5; } 
+
+/* Invisible, but still takes up space and is clickable */
+.invisible { opacity: 0; }
+```
+
+## 2. Opacity vs. RGBA/HSLA
+
+It's crucial to understand the difference between setting transparency via `opacity` and setting transparency via the color function's alpha channel (`rgba()` or `hsla()`):
+
+| Feature | `opacity` | `rgba()` or `hsla()` |
+| :--- | :--- | :--- |
+| **Target** | The **entire element** (background, text, children, etc.). | Only the **color** property it is applied to (e.g., `background-color` or `color`). |
+| **Inheritance** | **Inherited by children.** All nested elements become transparent relative to the parent's opacity. | **Not inherited.** Child elements maintain their full opacity. |
+| **Use Case** | Fading out an entire element, transition effects, hover states. | Creating a semi-transparent background color while keeping the text inside completely solid and readable. |
+
+### Example Comparison
+
+If a parent container has `opacity: 0.5;`, the text inside will also be 50% transparent.
+
+If a parent container has `background-color: rgba(0, 0, 0, 0.5);`, the background will be 50% transparent, but the text inside will remain 100% opaque.
+
+<AdsComponent />
+<br />
+
+## 3. `opacity` and Interaction
+
+When an element's opacity is set to `0` (`opacity: 0;`), it becomes visually invisible. However, by default, the element still exists in the document flow and can still be interacted with (it's "clickable").
+
+To make an invisible element truly non-interactive:
+
+1.  Use `visibility: hidden;` (Removes element from view, but still affects layout and is non-clickable).
+2.  Use `display: none;` (Removes element from view and flow, and is non-clickable).
+3.  Combine `opacity: 0;` with `pointer-events: none;` to keep the element in the flow but make it untouchable by the mouse.
+
+```css title="styles.css"
+.hidden-and-untouchable {
+  opacity: 0;
+  pointer-events: none; /* Mouse clicks and taps pass through the element */
+}
+```
+
+## 4. Performance and Transitions
+
+The `opacity` property is generally efficient and performs well because it is often hardware-accelerated by the browser's GPU.
+
+It is frequently used in CSS transitions and animations to create smooth visual fades, as the browser can render these changes rapidly.
+
+```css title="styles.css"
+.fade-box {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out; /* Smooth transition over 0.3 seconds */
+}
+
+.fade-box:hover {
+  opacity: 0.7; /* Fades smoothly on hover */
+}
+```
+
+<AdsComponent />
+<br />
+
+## Interactive `opacity` Demo
+
+Hover over the box to see the opacity transition. Notice that the child text fades along with the background because `opacity` affects the entire element.
+
+<CodePenEmbed 
+  title="Interactive opacity Demo"
+  penId="GgZGqKq"
+/>
\ No newline at end of file