Bits of .NET

🎨 CSS Shadows = Material Design Depth

Flat UI is a design dinosaur. Advanced box shadow techniques create realistic depth, improve UX, and make your interfaces feel premium and interactive.

📝 Material Design Shadow System

/* Material Design Shadow Elevations */
:root {
  /* Elevation 1 - Subtle lift */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

  /* Elevation 2 - Card hover */
  --shadow-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);

  /* Elevation 3 - Buttons */
  --shadow-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);

  /* Elevation 4 - Dropdowns */
  --shadow-4: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);

  /* Elevation 5 - Modals */
  --shadow-5: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.10);

  /* Elevation 6 - Navigation */
  --shadow-6: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Dynamic Shadow on Hover */
.card {
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-4);
    transform: translateY(-2px);
}

/* Inset Shadow for Pressed State */
.button:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(1px);
}

/* Colored Shadows for Brand Accent */
.primary-shadow {
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3), 
                0 1px 3px rgba(52, 152, 219, 0.1);
}

/* Gradient Shadow for Depth */
.gradient-shadow {
    position: relative;
}
.gradient-shadow::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
    filter: blur(8px);
}

🎯 Advanced Shadow Techniques

/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.floating-card {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Multi-Directional Shadows */
.directional-shadow {
    box-shadow: 
        /* Top-left shadow */
        -8px -8px 20px rgba(0,0,0,0.1),
        /* Bottom-right shadow */
        8px 8px 20px rgba(0,0,0,0.15);
}

/* Neumorphism (Soft UI) */
.neumorphic {
    background: #e0e5ec;
    box-shadow: 
        9px 9px 16px rgba(163,177,198,0.6),
        -9px -9px 16px rgba(255,255,255,0.5);
}

.neumorphic-inset {
    background: #e0e5ec;
    box-shadow: 
        inset 9px 9px 16px rgba(163,177,198,0.6),
        inset -9px -9px 16px rgba(255,255,255,0.5);
}

/* Inner Glow */
.inner-glow {
    box-shadow: inset 0 0 30px rgba(52, 152, 219, 0.3);
}

/* Text Shadow Effect (Depth on Text) */
.depth-text {
    text-shadow: 
        0 1px 0 rgba(0,0,0,0.1),
        0 2px 0 rgba(0,0,0,0.1),
        0 3px 0 rgba(0,0,0,0.1);
}

/* Glassmorphism Shadow */
.glass {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
}

💡 Shadow Design Principles

• Use shadows to create visual hierarchy (higher elements have bigger shadows)
• Maintain consistent shadow direction across your UI
• Use softer shadows for light mode, harder shadows for dark mode
• Combine shadows with transitions for interactive feedback
• Test shadows on different backgrounds (they appear differently)