Box-shadow Property

Shadow around the border of an element

Box-shadow examples

Box shadow - Google AdsRating

Code

script.css
Copy

                div {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2); 
}
              

Sample Output

Shadow - Google Ads Rating

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus ullam, autem quis.

Box shadow - Shaadi

Code

script.css
Copy

                div {
    border: solid 1px rgba(0, 0, 0, .075);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);;
}
    
div:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2), 0px 6px 8px rgba(0, 0, 0, 0.2);
}
              

Sample Output

Shadow - Shaadi

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus ullam, autem quis.

Box shadow - All sides

Code

script.css
Copy

                div {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
              

Sample Output

Shadow - 4 sides

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus ullam, autem quis.

Box shadow - All sides rounded

Code

script.css
Copy

                div {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border-radius: 25px;
  }
              

Sample Output - rounded edges

Shadow - 4 sides rounded

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus ullam, autem quis.

Box shadow - Google Samples

Code

script.css
Copy

                div {
  box-shadow: 0 0px 14px 0 #0000002e;
}
              

Sample Output

Shadow - Google

Google card - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus.

Box shadow - xham Samples

Code

script.css
Copy

                div.xham {
      box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
              

Sample Output

Shadow - xham

xham card - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus.

Box shadow - Gfg Sample

Code

script.css
Copy

                div {
    background: #f9f9f9;
    border-top: solid 4px #308d46;
    box-shadow: 0 0 15px 0 #0000002e;
}
              

Sample Output

Shadow - GFG

GFG card - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus.

Box shadow - All sides dark

Code

script.css
Copy

                div {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
              

Sample Output

Shadow - 4 sides dark

Youtube card - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque eos iure iste possimus doloribus.

Box shadow - Misc Samples