Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 03 Aug, 2022
Improve Article
Save Article

The purpose of this article is to use box shadows for creating an accordion hover effect.

Approach: The CSS box-shadow property is used to draw shadows around an element. CSS box-shadow property has the following syntax.


box-shadow : x-offset y-offset blur-radius spread-radius color


<!DOCTYPE html>
   <body style="text-align: center;">
         .info {
         position: relative;
         max-width: 100%;
         font-size: 60px;
         .info label, .info-content {
         padding: 10px;
         display: block;
         .info label {
         background: #808080;
         .info-content {
         background: #ffffff;
         display: none;
         .info input {
         display: none;
         .info input:checked ~ .info-content {
         display: block;
         .info label:hover {
         box-shadow: inset 0 0 10px red;           
      <div class="info">
         Hover mouse over this accordion to see box-shadow
         in action. After that click on accordion to show
         its content.
         <input id="info1" type="checkbox" />
         <label for="info1">Geeks For Geeks</label>
         <div class="info-content">
            A Computer Science portal for geeks. It contains
            well written, well thought and well explained
            computer science and
            programming articles, quizzes
            and videos.

Output:  You can see the hover effected red shadow.

  • Before Click: We see the following web page. 

  • After Click: You see the content for  the “GeeksForGeeks” accordion.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!