Box Shadows and Outlines

Box Shadows & Outlines: Dress Up Your Boxes!

The Story of the Magic Frame Shop

Imagine you own a little frame shop. You sell beautiful picture frames to people. Every frame has two special powers:

1. Shadows - Make the picture look like it’s floating above the wall
2. Outlines - Draw a bright border around the frame to make it stand out

Today, we’ll learn how CSS gives your web boxes these same magic powers!

Part 1: The Floating Effect with box-shadow

What is Box Shadow?

Think of a sunny day. When you stand outside, your body makes a shadow on the ground. The box-shadow property does the same thing for boxes on a webpage - it creates a shadow that makes things look 3D!

The Magic Recipe

box-shadow:
  offset-x   /* left or right */
  offset-y   /* up or down */
  blur       /* fuzzy or sharp */
  spread     /* bigger or smaller */
  color;     /* shadow color */

Let’s Break It Down (Like Building Blocks)

1. Horizontal Offset (offset-x)

• Positive number = shadow goes RIGHT
• Negative number = shadow goes LEFT
• 0 = shadow stays centered

/* Shadow moves 10px to the right */
box-shadow: 10px 0 0 0 gray;

2. Vertical Offset (offset-y)

• Positive number = shadow goes DOWN
• Negative number = shadow goes UP
• 0 = shadow stays centered

/* Shadow moves 10px down */
box-shadow: 0 10px 0 0 gray;

3. Blur Radius

• 0 = sharp edge (like cutting paper)
• Bigger number = fuzzy edge (like a cloud)

/* Sharp shadow */
box-shadow: 5px 5px 0 0 gray;

/* Fuzzy shadow */
box-shadow: 5px 5px 20px 0 gray;

4. Spread Radius

• Positive = shadow grows BIGGER
• Negative = shadow shrinks SMALLER
• 0 = same size as the box

/* Shadow grows 5px bigger */
box-shadow: 5px 5px 10px 5px gray;

5. Color Any color works: names, hex, rgba, hsl!

box-shadow: 5px 5px 10px 0 #333;
box-shadow: 5px 5px 10px 0
  rgba(0,0,0,0.3);

The inset Keyword - Shadow Goes INSIDE!

Normal shadows go outside the box. But what if you want the shadow INSIDE, like a carved hole?

/* Outer shadow (default) */
box-shadow: 5px 5px 10px gray;

/* Inner shadow */
box-shadow: inset 5px 5px 10px gray;

Think of it like this:

• Regular shadow = a box sitting ON a table
• Inset shadow = a hole cut INTO the table

Multiple Shadows - Stack Them Up!

You can add MANY shadows at once, separated by commas:

box-shadow:
  3px 3px 5px rgba(0,0,0,0.2),
  -3px -3px 5px rgba(255,255,255,0.5),
  inset 0 0 10px rgba(0,0,0,0.1);

Part 2: The Bright Border with outline

What is Outline?

Remember the frame shop? The outline is like putting a glowing ring around your picture frame. It says “LOOK AT ME!”

Outline vs Border - What’s Different?

Key Point: Outlines float OUTSIDE the box without pushing anything around!

The Outline Recipe

outline: width style color;

Example:

/* A solid blue outline, 3px thick */
outline: 3px solid blue;

/* A dashed red outline, 2px thick */
outline: 2px dashed red;

/* A dotted green outline */
outline: 4px dotted green;

Outline Styles You Can Use

• solid - one straight line
• dashed - little dashes
• dotted - little dots
• double - two lines
• groove - looks carved in
• ridge - looks raised up
• inset - pressed into page
• outset - popping out of page

Removing the Default Outline

Browsers add outlines when you click on buttons or inputs. Sometimes you want to remove it:

button:focus {
  outline: none;
}

WARNING: Only remove outlines if you add another way to show focus! People who use keyboards need to see what’s selected.

Part 3: The Gap with outline-offset

What is Outline Offset?

Imagine your picture frame, then the glowing ring around it. The outline-offset is the GAP between the frame and the glow.

/* Outline touches the box edge */
outline: 3px solid blue;
outline-offset: 0;

/* Outline floats 10px away */
outline: 3px solid blue;
outline-offset: 10px;

/* Outline goes INSIDE (negative) */
outline: 3px solid blue;
outline-offset: -5px;

Visual Example

No offset:          With offset:
┌──────────┐        ┌──────────┐
│ ┌──────┐ │        │          │
│ │ BOX  │ │        │  ┌────┐  │
│ └──────┘ │        │  │BOX │  │
└──────────┘        │  └────┘  │
  ^ outline           └──────────┘
  touches box           ^ gap between
                          outline & box

Quick Summary

graph LR
    A["Box Shadow"] --> B["Creates floating effect"]
    A --> C["Can be inset"]
    A --> D["Multiple shadows allowed"]

    E["Outline"] --> F["Glowing ring around box"]
    E --> G["Doesn't take space]
    E --> H[Can't style each side"]

    I["Outline Offset"] --> J["Gap between box & outline"]
    I --> K["Positive = outward"]
    I --> L["Negative = inward"]

Real-World Examples

Card with Soft Shadow

.card {
  box-shadow:
    0 4px 6px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.08);
}

Button with Focus Ring

.button:focus {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

Neumorphism Effect

.neu-box {
  box-shadow:
    5px 5px 10px #d1d1d1,
    -5px -5px 10px #ffffff;
}

You Did It!

Now you know how to:

• Make boxes float with box-shadow
• Create glowing rings with outline
• Add gaps with outline-offset

Go make your web pages look amazing!