Article Categories

Selected Reading

How to create an accordion hover effect with box-shadows in CSS

CSS Web Development Front End Technology

An accordion hover effect with box-shadows in CSS creates an interactive element that expands content when hovered over, while adding visual depth through shadows. This effect combines CSS transitions, hover states, and the box-shadow property to create smooth, engaging user interactions.

Syntax

selector {
    box-shadow: x-offset y-offset blur-radius spread-radius color;
}

selector:hover {
    box-shadow: x-offset y-offset blur-radius spread-radius color;
}

Box-Shadow Property Values

Property	Description
`x-offset`	Horizontal shadow position (positive = right, negative = left)
`y-offset`	Vertical shadow position (positive = down, negative = up)
`blur-radius`	Optional. Controls shadow blur (higher = more blur)
`spread-radius`	Optional. Controls shadow size
`color`	Optional. Shadow color
`inset`	Optional. Creates inner shadow instead of outer

Example: Basic Accordion with Hover Effect

The following example creates an accordion that expands on hover with enhanced box-shadow effects

<!DOCTYPE html>
<html>
<head>
<style>
    .accordion {
        max-width: 500px;
        margin: 20px auto;
        background: #f4f4f4;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }
    
    .accordion-header {
        background: #333;
        color: white;
        padding: 15px 20px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        background: #fff;
        transition: all 0.3s ease;
    }
    
    .accordion-content p {
        padding: 20px;
        margin: 0;
    }
    
    .accordion:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        transform: translateY(-2px);
    }
    
    .accordion:hover .accordion-header {
        background: #555;
        box-shadow: inset 0 0 10px rgba(255,255,255,0.1);
    }
    
    .accordion:hover .accordion-content {
        max-height: 200px;
        box-shadow: inset 0 5px 10px rgba(0,0,0,0.05);
    }
</style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-header">
            Hover to Expand
        </div>
        <div class="accordion-content">
            <p>This content appears smoothly when you hover over the accordion header. The box-shadow effect adds depth and visual appeal to the interaction.</p>
        </div>
    </div>
</body>
</html>

A dark header box appears with "Hover to Expand" text. When hovered, the box lifts slightly with enhanced shadows, the header lightens, and content smoothly expands below with an inner shadow effect.

Example: Multiple Accordion Items

This example demonstrates multiple accordion items with staggered hover effects

<!DOCTYPE html>
<html>
<head>
<style>
    .accordion-container {
        max-width: 600px;
        margin: 20px auto;
    }
    
    .accordion-item {
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        overflow: hidden;
    }
    
    .accordion-title {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .accordion-body {
        max-height: 0;
        background: #f9f9f9;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    
    .accordion-body p {
        padding: 15px;
        margin: 0;
        color: #555;
    }
    
    .accordion-item:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        transform: scale(1.02);
    }
    
    .accordion-item:hover .accordion-title {
        box-shadow: inset 0 0 20px rgba(255,255,255,0.2);
    }
    
    .accordion-item:hover .accordion-body {
        max-height: 150px;
        box-shadow: inset 0 3px 8px rgba(0,0,0,0.1);
    }
</style>
</head>
<body>
    <div class="accordion-container">
        <div class="accordion-item">
            <div class="accordion-title">Section 1</div>
            <div class="accordion-body">
                <p>Content for section 1 with smooth hover expansion and shadow effects.</p>
            </div>
        </div>
        
        <div class="accordion-item">
            <div class="accordion-title">Section 2</div>
            <div class="accordion-body">
                <p>Content for section 2 demonstrating the accordion hover effect with enhanced shadows.</p>
            </div>
        </div>
    </div>
</body>
</html>

Two purple gradient accordion items appear vertically stacked. When hovered, each item slightly enlarges with enhanced shadows, the header gets a light overlay effect, and the content area expands smoothly with an inner shadow.

Conclusion

Creating accordion hover effects with box-shadows combines the max-height property for content expansion, CSS transitions for smooth animations, and strategic use of box-shadow to add visual depth. This technique enhances user experience by providing immediate visual feedback and elegant content reveal animations.

Harshit Sachan

Updated on: 2026-03-15T16:00:06+05:30

722 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next