Box-shadow CSS

by Online Tutorials Library July 14, 2022

Box-shadow CSS

It is used to add shadow-like effects around the frame of an element.

Syntax

Let’s understand property values.

h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to the right side of the box. Its negative value is used to set the shadow on the left side of the box.

v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive value in it sets the shadow below the box, and the negative value sets the shadow above of the box.

blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.

spread: It sets the shadow size. The spread size depends upon the spread value.

color: As its name implies, this attribute is used to set the color of the shadow. It is an optional attribute.

inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be created within the box.

initial: It is used to set the property of the box-shadow to its default value.

inherit: it is inherited from its parent.

none: It is the default value that does not include any shadow property.

Let’s understand the above attributes by using an illustration.

Example

  <!DOCTYPE html>   <html>       <head>           <title>CSS box-shadow Property</title>                   <style>               div              {              border: 1px solid;               padding: 10px;               }              #hvb               {                   /* box-shadow: h-offset v-offset blur */                   box-shadow: 5px 10px 10px;               }               #spr              {                  /* box-shadow: h-offset v-offset blur spread */                  box-shadow: 5px 10px 10px 10px;               }              #col              {                 /* box-shadow: h-offset v-offset blur spread color */                   box-shadow: 5px 10px 10px 10px orange;               }              #ins              {                    /* box-shadow: h-offset v-offset blur spread color inset */                   box-shadow: 5px 10px 10px 10px orange inset;               }              #init              {                    /* box-shadow: initial */                  box-shadow: initial;                            }              #non              {                                /* box-shadow: none */                   box-shadow: none;              }          </style>       </head>               <body>           <div id = “hvb”>               <h1>It is a shadow box that has h-offset, v-offset and blur attributes.</h1>          </div>  <br><br>           <div id = “spr”>               <h1>It is a box that includes the spread attribute.</h1>          </div>   <br><br>           <div id = “col”>           <h1>It is a box that includes the color attribute.</h1>       </div>   <br><br>        <div id = “ins”>         <h1>It is a box that includes the inset attribute.</h1>     </div>   <br><br>      <div id = “init”>         <h1>It is a box that includes the initial attribute.</h1>     </div>   <br><br>     <div id = “non”>         <h1>It is a box that includes the default attribute i.e. none.</h1>    </div>       </body>   </html>  

Test it Now

Next TopicCSS Text-shadow

Box-shadow CSS

Box-shadow CSS

Syntax

Example

Program to convert infix to postfix expression in C++ using the Stack Data Structure

CSS clip-path

You may also like