CSS Box-Shadow Property

The CSS box-shadow property adds shadow effects around an element's frame, allowing control over the shadow's position, blur, spread, and color. It is widely used to add depth and a three-dimensional look to web page elements. 

Syntax

The basic syntax for the box-shadow property is:

box-shadow: [inset] h-offset v-offset blur-radius spread-radius color;

You can apply multiple shadows to a single element by separating the definitions with commas. 

Property Values

Only the horizontal (h-offset) and vertical (v-offset) offsets are required. 

Value  Description
h-offset Required. The horizontal offset of the shadow. Positive values move the shadow right; negative values move it left.
v-offset Required. The vertical offset of the shadow. Positive values move the shadow down; negative values move it up.
blur-radius Optional. The larger this value, the more blurred and bigger the shadow becomes. The default is 0 (a sharp edge).
spread-radius Optional. Positive values cause the shadow to expand in all directions; negative values cause it to shrink. The default is 0 (same size as the element).
color Optional. The color of the shadow. If omitted, the default is typically the current text color.
inset Optional. If specified, changes the shadow from an outer shadow (the default) to an inner shadow, as if the content is pressed into the box.
none The default value, meaning no shadow is applied to the element.

Examples

  • Basic shadow (offset and color):

    css

    .example-1 {
  box-shadow: 5px 10px #888888;
}
    This creates a gray shadow 5 pixels to the right and 10 pixels below the element.
  • Shadow with blur and spread:

    css

    .example-2 {
  box-shadow: 10px 10px 8px 10px #aaaaaa;
}
    This shadow has an offset of 10px in both directions, a blur radius of 8px, and a spread radius of 10px.
  • Inner shadow (inset):

    css

    .example-3 {
  box-shadow: 5px 10px inset;
}
    This creates a default-colored shadow inside the element's border.
  • Multiple shadows:

    css

    .example-4 {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
    This applies three distinct shadows to the same element, layered on top of each other (the first one is on top).

  • The box-shadow CSS property adds shadow effects around an element's frame. It allows you to create depth, elevation, and 3D effects for containers like <div>s, buttons, and cards. "box-shadow: [inset] h-offset v-offset blur spread color;"

 

Property Values

Value  Description Required?
h-offset Horizontal distance. Positive = right, Negative = left. Yes
v-offset Vertical distance. Positive = bottom, Negative = top. Yes
blur The "softness" of the shadow. Higher = blurrier. No (default 0)
spread Increases or decreases the size of the shadow. No (default 0)
color The shadow's color (Hex, RGB, etc.). Defaults to text color. No
inset Changes the shadow from an outer (drop) shadow to an inner shadow. No

Key Examples

  • Simple Drop Shadow: box-shadow: 10px 10px 5px grey;
  • Inner Shadow: box-shadow: inset 5px 5px 10px grey;
  • Multiple Shadows: Separate different shadow layers with a comma.
    • Example: box-shadow: 3px 3px red, -1px -1px 5px blue; 
  • Layering: The first shadow in a comma-separated list appears on top.
  • Border Radius: If the element has a border-radius, the shadow will automatically follow the rounded corners.
  • Layout Impact: Box shadows do not affect the layout or take up space in the box model.
  • Transitions: You can smoothly animate shadows on :hover using the CSS transition property. 

For inspiration, you can explore collections of beautiful pre-made box shadows to copy and paste directly into your projects. 

The inset keyword in the CSS box-shadow property changes a standard outer shadow (drop shadow) to an inner shadow, making the element look recessed or pressed into the background. 

Syntax

The general syntax for the box-shadow property with the inset keyword is:

box-shadow: inset h-offset v-offset blur-radius spread-radius color;

Only the horizontal (h-offset) and vertical (v-offset) offsets are required. The inset keyword can be placed at the beginning or end of the value list. 

  • inset: (Optional) Changes the shadow from an outer (default) to an inner shadow.
  • h-offset: (Required) The horizontal position of the shadow. Positive values move it right, negative values move it left.
  • v-offset: (Required) The vertical position of the shadow. Positive values move it down, negative values move it up.
  • blur-radius: (Optional) The blur distance. Higher values create a more blurred, larger shadow. Defaults to 0 (sharp edges).
  • spread-radius: (Optional) A positive value expands the shadow size, while a negative value shrinks it. Defaults to 0.
  • color: (Optional) The color of the shadow. Defaults to the element's text color if omitted. 

Examples

  • Basic Inset Shadow:

A simple inner shadow giving a subtle depth effect:

.element {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This example produces a dark shadow inside the top and left edges, making the element look slightly sunken. 

  • Multiple Inset Shadows:

You can specify multiple shadows for an element by separating them with commas. This is useful for creating complex effects like neumorphism: 

.neumorphic-inset {
  background: #e0e0e0;
  box-shadow: 
    inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), 
    inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

This code creates a light shadow from one direction and a dark shadow from the opposite, mimicking a surface pressed into the background. 

Inset Shadow on One Side

To achieve an inset shadow on just one side, you can use a negative spread-radius to contract the shadow from the other sides: 

.left-inset-shadow {
  box-shadow: inset 5px 0 5px -5px #000;
}

For more complex single-side shadows, especially those with clean cuts, the clip-path property combined with box-shadow is a modern technique. 

You can experiment with these values using interactive tools like the MDN Box-shadow generator. 

The inset keyword in the CSS box-shadow property transforms an outer drop shadow into an inner shadow, making the element appear recessed or "pressed" into the page. 

Syntax

The inset keyword can be placed at either the very beginning or the very end of the property values. 

css

/* Standard syntax */
box-shadow: inset [horizontal-offset] [vertical-offset] [blur] [spread] [color];

/* Example */
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);

Core Components

  • inset: Changes the shadow from an outer shadow (default) to an inner one.
  • Horizontal Offset: Moves the shadow right (positive) or left (negative) inside the box.
  • Vertical Offset: Moves the shadow down (positive) or up (negative) inside the box.
  • Blur Radius: Higher values create a softer, more diffuse inner edge (optional, defaults to 0).
  • Spread Radius: Expands or shrinks the shadow size (optional, defaults to 0).
  • Color: Defines the shadow's color; defaults to the element's text color if omitted. 

Common Use Cases

Effect  CSS Example Description
Pressed Button inset 2px 2px 5px rgba(0,0,0,0.3) Creates a "sunken" look for active UI states.
Input Fields inset 0 1px 3px rgba(0,0,0,0.1) Adds depth to form fields for a modern aesthetic.
Neumorphism inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff Combines multiple inset shadows for a soft, 3D embossed look.

Key Rules

  • Placement: Inner shadows are drawn inside the element's border box but above the background and below the content.
  • Rounding: If the element has a border-radius, the inset shadow will automatically follow the same rounded corners.
  • Multiple Shadows: You can layer inset and outset shadows together by separating them with commas. 

Pro Tip: For precise styling, use an interactive Box Shadow Generator to preview offsets and blur in real-time.

The CSS box-shadow property applies shadow effects to an element, the inset keyword changes the shadow's position from outer to inner, and the cubic-bezier function is used for creating custom animation and transition timing curves. 

CSS box-shadow Property

The box-shadow property adds a shadow around an element's frame. You can define multiple shadows for a single element by separating the values with a comma. 

Syntax

css

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

Values

  • h-offset (required): The horizontal offset of the shadow. Positive values move the shadow right, negative values move it left.
  • v-offset (required): The vertical offset of the shadow. Positive values move the shadow down, negative values move it up.
  • blur-radius (optional): The larger the value, the blurrier the shadow. A value of 0 produces a sharp shadow.
  • spread-radius (optional): Positive values expand the shadow, and negative values shrink it.
  • color (optional): Defines the color of the shadow. If omitted, the browser's default color (usually black) is used.
  • inset (optional): Changes the shadow from the default outer shadow (outset) to an inner shadow. 

The inset Keyword

When used in the box-shadow property, the inset keyword makes the shadow appear inside the element's frame, rather than outside it. 

  • box-shadow: 2px 2px 5px gray;: Creates an outer shadow.
  • box-shadow: 2px 2px 5px gray inset;: Creates an inner shadow. 

Note: There is also a separate, newer CSS inset property used for positioning elements (shorthand for top, right, bottom, and left), but it is distinct from the box-shadow keyword. 

The cubic-bezier Function (Bezier Curves)

Bézier curves are mathematical curves used in CSS for defining custom animation and transition timing functions (the transition-timing-function property). They define the acceleration curve of an animation, allowing for smooth, non-linear movement. 

Syntax

css

transition-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);

Values

The cubic-bezier function takes four values, which are the coordinates of two control points, P1 and P2. 

  • The start point P0 is always (0, 0).
  • The end point P3 is always (1, 1).
  • P1x, P1y, P2x, P2y must all be between 0 and 1. 

Common predefined timing functions (ease, linear, ease-in, ease-out, ease-in-out) are all specific cubic-bezier curves. 

HTML Example

Below is a complete HTML example demonstrating the box-shadow property and a transition using cubic-bezier. 

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 50px;
  /* Outer shadow */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); 
  /* Apply transition for a smooth hover effect */
  transition: box-shadow 0.5s cubic-bezier(0.42, 0, 0.58, 1), transform 0.5s; 
}

.box:hover {
  /* Inner shadow on hover */
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5) inset;
  transform: scale(1.1); /* Add a slight scale effect */
}
</style>
</head>
<body>

<h1>CSS Properties Example</h1>
<p>Hover over the box to see the box-shadow and cubic-bezier transition effect.</p>

<div class="box"></div>

</body>
</html>

 

Creating visually deep and smooth web designs relies on mastering shadows, spacing, and timing functions. Here is the complete breakdown of these properties: 

1. CSS box-shadow Property

The box-shadow property adds one or more shadow effects to an element's frame. 

Syntax:
box-shadow: h-offset v-offset blur spread color inset; 

  • h-offset (Required): Horizontal position. Positive values move it right; negative move it left.
  • v-offset (Required): Vertical position. Positive values move it down; negative move it up.
  • blur (Optional): Controls the softness. Higher values mean more blur; default is 0 (sharp).
  • spread (Optional): Expands or shrinks the shadow size. Positive increases; negative decreases.
  • color (Optional): Sets the shadow's color. Defaults to the element's text color.
  • inset (Optional): Changes the shadow from an outer shadow (outset) to an inner shadow. 

2. CSS inset Property

The inset property is a modern shorthand for setting top, right, bottom, and left simultaneously on a positioned element (e.g., absolute, relative). 

Usage:

  • inset: 10px; Sets all four sides to 10px.
  • inset: 10px 20px; Top/bottom = 10px, Left/right = 20px.
  • inset: 10px 20px 30px 40px; Follows clockwise order: Top (10px), Right (20px), Bottom (30px), Left (40px). 

3. Bézier Curve Properties (cubic-bezier)

Bézier curves define the acceleration/speed of an animation or transition. 

Function: cubic-bezier(x1, y1, x2, y2) 

  • Points: It is defined by four points: P0(0,0), P1(x1,y1), P2(x2,y2), and P3(1,1).
  • Range: X values must be between 0 and 1. Y values can exceed this range to create "bouncing" effects. 

Common Keywords (Predefined Curves):

  • linear: cubic-bezier(0, 0, 1, 1) — constant speed.
  • ease: cubic-bezier(0.25, 0.1, 0.25, 1) — slow start, fast middle, slow end.
  • ease-in: cubic-bezier(0.42, 0, 1, 1) — slow start.
  • ease-out: cubic-bezier(0, 0, 0.58, 1) — slow end. 

Complete HTML/CSS Example

This code combines an inset shadow, the inset layout property, and a custom Bézier curve on hover. 

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    position: relative;
    height: 300px;
    background: #f0f0f0;
  }

  .box {
    position: absolute;
    /* Inset Layout: 50px from all sides */
    inset: 50px; 
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    
    /* Box Shadow: Outset with 15px blur */
    box-shadow: 10px 10px 15px rgba(0,0,0,0.2);
    
    /* Bezier Transition */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .box:hover {
    /* Inset Shadow: Creates a 'pressed' look */
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.3);
    transform: scale(1.05);
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Hover Me (Bézier + Shadow)</div>
  </div>
</body>
</html>

To achieve a high-end glassmorphism effect, you must stack multiple box-shadow layers—both outer (drop) and inner (inset) shadows—to simulate light refraction and depth. 

The Strategy for Glassmorphism

  • Layer 1: External Shadow: Use a soft, distant drop shadow to lift the card from the background.
  • Layer 2: Inner Highlight (Top/Left): Use an inset shadow with a light color (white) to simulate light hitting the top edge.
  • Layer 3: Inner Shadow (Bottom/Right): Use a darker inset shadow to simulate depth or a thick glass edge.
  • The Magic Touch: Combine these with backdrop-filter: blur() and a semi-transparent background color. 

Full Implementation Code

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #96e6a1);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .glass-card {
    width: 350px;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15); /* Transparent background */
    backdrop-filter: blur(15px); /* Frosted glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Thin outer rim */
    
    /* MULTIPLE BOX SHADOWS */
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.2),             /* Layer 1: Soft Drop Shadow */
      inset 0 1px 0 rgba(255, 255, 255, 0.5),    /* Layer 2: Top Edge Reflection */
      inset 0 -1px 0 rgba(255, 255, 255, 0.1),   /* Layer 3: Bottom Subtle Detail */
      inset 0 0 20px 5px rgba(255, 255, 255, 0.15); /* Layer 4: Inner Glow */
      
    text-align: center;
    font-family: sans-serif;
    color: white;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .glass-card:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
  }
</style>
</head>
<body>

<div class="glass-card">
  <h2>Glassmorphism</h2>
  <p>Multiple shadows create realistic depth.</p>
</div>

</body>
</html>

Key Techniques Used:

  • Shadow Separation: You can stack unlimited shadows by separating them with a comma.
  • Shadow Rendering Order: The first shadow listed appears on top; subsequent shadows are placed behind it.
  • Performance Tip: Use tools like the https://hype4.academy/tools/glassmorphism-generator or https://ui.glass/generator/ to visually fine-tune multiple layers quickly.

Adding an animated gradient background is the final step to a premium glassmorphism look. The movement allows the backdrop-filter: blur() to catch shifting colors, making the glass effect much more vibrant. 

The "Moving Mesh" Background

The most effective way to do this in pure CSS is to use a large background-size and animate the background-position. 

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    /* 1. ANIMATED GRADIENT BACKGROUND */
    /* Use 400% size so there is 'room' to move the gradient around */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* 2. GLASS CARD WITH MULTIPLE SHADOWS */
  .glass-container {
    width: 400px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px); /* Frosted effect */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Multiple Shadow Layers */
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.2),             /* Outer depth */
      inset 0 1px 0 rgba(255, 255, 255, 0.4),    /* Top rim light */
      inset 0 -1px 0 rgba(255, 255, 255, 0.1);   /* Bottom rim detail */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    
    /* Smooth Bezier Scale */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .glass-container:hover {
    transform: scale(1.05);
  }
</style>
</head>
<body>

  <div class="glass-container">
    <h1 style="margin:0; font-weight: 300;">Vibrant Glass</h1>
    <p style="opacity: 0.8;">Animated Background + Multiple Shadows</p>
  </div>

</body>
</html>
Advanced Optimization Tips
  • Performance: Animating background-position can be heavy on the CPU for older mobile devices. For a more performant version, you can animate floating SVG blobs in the background instead of a full-screen gradient.
  • The "Golden Ratio" of Blur: A blur between 10px and 25px usually yields the best "glass" results.
  • Contrast Fix: If your text is hard to read, add a very subtle text-shadow: 0 2px 4px rgba(0,0,0,0.3);

To finalize this high-end UI, we will replace the linear gradient with floating animated blobs. This "Mesh Gradient" style is the peak of modern web design, as it provides a fluid, organic backdrop for the glass card to sit on.

➡️ Step 1: The HTML Structure

We create a background container for the blobs and place the glass card on top using a high z-index.

<div class="bg-area">
  <div class="blob b1"></div>
  <div class="blob b2"></div>
  <div class="blob b3"></div>
</div>

<div class="glass-card">
  <h1>Modern UI</h1>
  <p>Animated Blobs + Glassmorphism</p>
</div>

➡️ Step 2: Animating with Bézier Curves

Instead of simple linear movement, we use a cubic-bezier timing function to make the blobs feel like they are floating in water.

✅ Answer:

Here is the complete, finished code. It combines Multiple Shadows, the Inset Property, and Bézier-animated backgrounds.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  :root {
    --bg-color: #0f172a;
    --blob1: #3b82f6;
    --blob2: #a855f7;
    --blob3: #ec4899;
  }

  body {
    margin: 0;
    height: 100vh;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
  }

  /* 1. ANIMATED BLOBS */
  .bg-area {
    position: absolute;
    inset: 0; /* Modern Inset Property */
    z-index: -1;
    filter: blur(80px);
  }

  .blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    opacity: 0.6;
    animation: float 20s infinite cubic-bezier(0.45, 0, 0.55, 1);
  }

  .b1 { background: var(--blob1); top: -10%; left: -10%; }
  .b2 { background: var(--blob2); bottom: -10%; right: -10%; animation-delay: -5s; }
  .b3 { background: var(--blob3); top: 40%; left: 30%; animation-delay: -10s; }

  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(100px, 50px) scale(1.2); }
    66% { transform: translate(-50px, 150px) scale(0.8); }
  }

  /* 2. FINAL GLASS CARD */
  .glass-card {
    padding: 3rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    color: white;
    text-align: center;
    /* Multiple Shadow Layers */
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 0 40px rgba(255, 255, 255, 0.05);
    
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .glass-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
  }
</style>
</head>
<body>
  <div class="bg-area">
    <div class="blob b1"></div>
    <div class="blob b2"></div>
    <div class="blob b3"></div>
  </div>

  <div class="glass-card">
    <h2 style="margin: 0; font-size: 2.5rem;">Glass UI</h2>
    <p style="opacity: 0.7;">Bézier Motion & Stacked Shadows</p>
  </div>
</body>
</html>

To make your glassmorphism UI responsive, you should transition from a fixed-width layout to a fluid, mobile-first approach using https://www.w3schools.com/css/css_rwd_mediaqueries.asp. 

1. The Strategy: Mobile-First

Start by defining the "default" styles for the smallest screens (mobile), then use min-width media queries to add complexity for tablets and desktops. 

  • Fluid Widths: Use % or vw instead of fixed px for card widths.
  • Safe Margins: Use the CSS inset property or padding on a wrapper to ensure cards don't touch screen edges.
  • Stacking: Use Flexbox to stack cards vertically on mobile and horizontally on desktop. 

2. Implementation Code

Replace your previous .glass-card and body styles with this responsive version: 

/* DEFAULT: MOBILE STYLES (0px and up) */
.glass-container {
  display: flex;
  flex-direction: column; /* Stack cards vertically */
  gap: 20px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.glass-card {
  width: 100%; /* Full width on mobile */
  max-width: 400px; /* But don't let it get too huge */
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Multiple Box Shadows */
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.2), 
    inset 0 1px 0 rgba(255,255,255,0.3);
}

/* DESKTOP STYLES (768px and up) */
@media (min-width: 768px) {
  .glass-container {
    flex-direction: row; /* Align cards side-by-side */
    justify-content: center;
  }
  
  .glass-card {
    width: 350px; /* Fixed size for larger screens */
  }
}

3. Key Responsive Best Practices

  • Viewport Meta Tag: Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head> to ensure the mobile browser scales the frosted glass effect correctly.
  • Touch Targets: Ensure interactive elements inside your glass cards (like buttons) are at least 48x48px for easy tapping on mobile.
  • Performance: High backdrop-filter blur values can be laggy on older phones. Consider reducing the blur() amount (e.g., from 20px to 10px) inside a mobile media query if performance drops.

To wrap everything up, we will combine the Multiple Shadows, Bézier animations, and Inset properties into a responsive Bento Grid. This layout uses www.w3schools.com/css/css_grid.asp to create modular, varied-sized compartments that reflow seamlessly for mobile devices. 

🛠️ Final Responsive Bento Code

This code provides a "Glassmorphism Dashboard" that stacks on mobile and expands into a modern asymmetrical grid on desktop. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root { --glass: rgba(255, 255, 255, 0.1); --border: rgba(255, 255, 255, 0.2); }
  
  body {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(-45deg, #0f172a, #1e293b, #334155);
    font-family: 'Segoe UI', sans-serif; overflow-x: hidden;
  }

  /* 1. ANIMATED BLOBS (Bézier Motion) */
  .blob {
    position: fixed; width: 400px; height: 400px; border-radius: 50%;
    filter: blur(70px); z-index: -1; opacity: 0.5;
    animation: move 20s infinite cubic-bezier(0.45, 0, 0.55, 1);
  }
  .b1 { background: #3b82f6; top: -10%; left: -10%; }
  .b2 { background: #ec4899; bottom: -10%; right: -10%; animation-delay: -5s; }
  @keyframes move { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(100px, 100px); } }

  /* 2. RESPONSIVE BENTO GRID LAYOUT */
  .bento-grid {
    display: grid;
    gap: 1.5rem;
    padding: 2rem;
    width: 90%;
    max-width: 1100px;
    /* Mobile-first: 1 column */
    grid-template-columns: 1fr;
  }

  /* 3. GLASS CARD WITH MULTIPLE SHADOWS */
  .card {
    background: var(--glass);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2rem;
    color: white;
    /* Stacked shadows for depth */
    box-shadow: 
      0 10px 30px rgba(0,0,0,0.3), 
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 -1px 0 rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .card:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.5); }

  /* Desktop Grid Specifics (min-width: 768px) */
  @media (min-width: 768px) {
    .bento-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 180px;
    }
    .large { grid-column: span 2; grid-row: span 2; } /* Feature item */
    .tall { grid-row: span 2; } /* Vertical item */
  }
</style>
</head>
<body>
  <div class="blob b1"></div>
  <div class="blob b2"></div>

  <div class="bento-grid">
    <div class="card large"><h2>Main Feature</h2><p>Spans 2 columns on desktop.</p></div>
    <div class="card"><h3>Stat A</h3><p>Real-time data.</p></div>
    <div class="card"><h3>Stat B</h3><p>Active users.</p></div>
    <div class="card tall"><h3>Activity</h3><p>Full height tracker.</p></div>
    <div class="card"><h3>Settings</h3><p>Quick toggle.</p></div>
    <div class="card"><h3>Status</h3><p>All systems go.</p></div>
  </div>
</body>
</html>

💎 Final Professional-Tips for Mastery

  • Performance: For best mobile performance, use CSS will-change: transform on animated blobs to trigger hardware acceleration.
  • Accessibility: Use high-contrast white text (rgba(255,255,255,0.9)) to ensure readability over blurred backgrounds.
  • Tooling: Use the hype4.academy/tools/glassmorphism-generator to export complex shadow stacks instantly. 

This completes your full-stack guide to modern CSS shadows, spacing, and motion.