CSS: Box-Shadow on Three Sides Except Top

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

April 26, 2023
CSS
1 min read

The following is a CSS style example to create a box-shadow on three sides except for the top side.

HTML

<div id="shadowDiv">This is a three-sided shadow box.</div>

CSS

#shadowDiv {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}