Lesson 17: Creating Drop Shadows

Understanding Drop Shadows

Drop shadows add depth, dimension, and visual hierarchy to your designs. CSS provides two main properties for creating shadows: text-shadow for text elements and box-shadow for box elements.

text-shadow: Creates shadows behind text characters. Syntax: text-shadow: h-offset v-offset blur color;

box-shadow: Creates shadows around an element's frame. Syntax: box-shadow: h-offset v-offset blur spread color inset;

Inset Shadows: Creates inner shadows instead of outer shadows, giving an engraved effect.

Text Shadow Examples

Basic Shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Neon Glow

Multiple shadows for glow effect

3D Effect

Layered shadows for depth

Box Shadow Examples

box-shadow: 5px 5px 15px rgba(0,0,0,0.3);

Inset shadow for engraved effect

Material design shadow

CSS Shadow Syntax

/* Basic text shadow */
.heading {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Multiple text shadows for effect */
.glow-text {
  text-shadow: 0 0 5px #fff, 0 0 10px #ff00de;
}

/* Box shadow with spread */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Inset shadow for button press effect */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Multiple box shadows */
.elevated-element {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
              0 1px 2px rgba(0,0,0,0.24);
}

/* Using shadows with transitions */
.element {
  transition: box-shadow 0.3s ease;
}

.element:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 
              0 6px 6px rgba(0,0,0,0.23);
}

Advanced Shadow Techniques

Modern CSS provides more sophisticated ways to use shadows, including layered shadows, gradient shadows, and using shadows for creative effects.

Layered Shadows

Apply multiple shadows to create complex effects. This technique is great for creating depth and realistic lighting.

Multi-Layered Card

Realistic depth with stacked shadows

.layered-shadow {
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.12), 
    0 2px 2px rgba(0,0,0,0.12), 
    0 4px 4px rgba(0,0,0,0.12), 
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}

Neumorphism

A modern design trend that uses subtle shadows to create an extruded plastic look. Works best with light backgrounds and similar element/background colors.

Soft UI Element

Neumorphic design with dual shadows

.neumorphic-element {
  background: #f0f0f0;
  border-radius: 20px;
  box-shadow: 
    -5px -5px 10px rgba(255,255,255,0.8),
    5px 5px 10px rgba(0,0,0,0.1);
}

Creative Shadow Effects

/* Floating effect */
.floating-element {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}

.floating-element:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Cutout text effect */
.cutout-text {
  color: white;
  text-shadow: 
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
}

/* Gradient shadow */
.gradient-shadow {
  position: relative;
}

.gradient-shadow::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 20px;
  background: radial-gradient(ellipse at center, 
    rgba(0,0,0,0.4) 0%, 
    rgba(0,0,0,0) 80%);
  filter: blur(5px);
  z-index: -1;
}

Interactive Shadow Demo

Experiment with different shadow properties and see the results in real-time:

Horizontal Offset: 5px

Vertical Offset: 5px

Blur Radius: 10px

Spread Radius: 0px

Shadow Color:

Shadow Type:

Shadow Demonstration

.element {
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,1);
}

Real-World Use Cases

Card Design

Product Card

Subtle shadow for depth

Use box-shadow to create visual separation and depth for cards in UI designs.

Button States

Use inset shadows to create a pressed state for buttons.

Text Legibility

Text with shadow for better contrast

Add text shadows to improve readability on busy or gradient backgrounds.

Best Practices

Follow these guidelines for effective use of drop shadows:

Subtlety is Key: Avoid overly dramatic shadows that distract from content.

Consistent Lighting: Maintain a consistent light source direction throughout your design.

Performance: Use shadows sparingly as they can impact rendering performance.

Accessibility: Ensure text remains readable with shadows and maintains sufficient contrast.

Shadow Properties Comparison

Property Purpose Values Browser Support text-shadow Adds shadow to text h-offset, v-offset, blur, color All modern browsers box-shadow Adds shadow to elements h-offset, v-offset, blur, spread, color, inset All modern browsers filter: drop-shadow() Adds shadow to non-rectangular shapes h-offset, v-offset, blur, color All modern browsers

Responsive Shadow Techniques

/* Base shadow for larger screens */
.card {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 
              0 6px 6px rgba(0,0,0,0.23);
}

/* Reduce shadow on smaller screens */
@media (max-width: 768px) {
  .card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

/* Using CSS variables for consistent shadows */
:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.19);
}

.element-sm {
  box-shadow: var(--shadow-sm);
}

.element-md {
  box-shadow: var(--shadow-md);
}

.element-lg {
  box-shadow: var(--shadow-lg);
}

Common Mistakes to Avoid

Be aware of these pitfalls when using drop shadows:

Overly Dramatic Shadows

Card with excessive shadow

Distracting and unrealistic

Solution: Use subtle shadows that enhance rather than dominate the design.

Inconsistent Light Source

Solution: Maintain a consistent light direction throughout your design.

Ignoring Performance

Solution: Avoid excessive shadow layers, especially on animated elements.

Next Steps

Now that you understand drop shadows, continue to the next lesson to learn about text positioning and alignment.

Previous Lesson Next Lesson: Text Positioning