Box-shadow Reference v1.0 </doc>

Box-shadow

box-shadow의 속성은 박스 요소의 그림자를 설정합니다.

문법

box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset

Sample1 - x축, y축

.box.sha1 {background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);;}
.shadow01 {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);}
.shadow02 {box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}
.shadow03 {box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.8);}
.shadow04 {box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.8);}
.shadow05 {box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.8);}
.shadow06 {box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.8);}
.shadow07 {box-shadow: 12px 12px 5px rgba(0, 0, 0, 0.8);}
.shadow08 {box-shadow: 14px 14px 5px rgba(0, 0, 0, 0.8);}
.shadow09 {box-shadow: 16px 16px 5px rgba(0, 0, 0, 0.8);}
.shadow10 {box-shadow: 18px 18px 5px rgba(0, 0, 0, 0.8);}

Sample2 - blur

.shadow11 {box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);}
.shadow12 {box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);}
.shadow13 {box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8);}
.shadow14 {box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.8);}
.shadow15 {box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);}
.shadow16 {box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.8);}
.shadow17 {box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.8);}
.shadow18 {box-shadow: 4px 4px 21px rgba(0, 0, 0, 0.8);}
.shadow19 {box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.8);}
.shadow20 {box-shadow: 4px 4px 27px rgba(0, 0, 0, 0.8);}

Sample3 - spread

.shadow21 {box-shadow: 5px 5px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow22 {box-shadow: 8px 8px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow23 {box-shadow: 11px 8px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow24 {box-shadow: 14px 8px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow25 {box-shadow: 17px 8px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow26 {box-shadow: -5px -5px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow27 {box-shadow: -8px -8px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow28 {box-shadow: -11px -11px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow29 {box-shadow: -14px -14px 0px 5px rgba(0, 0, 0, 0.8) }
.shadow30 {box-shadow: -17px -17px 0px 5px rgba(0, 0, 0, 0.8) }

Sample4 - spread

.shadow31 {box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.8);}
.shadow32 {box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.8);}
.shadow33 {box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.8);}
.shadow34 {box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 0.8);}
.shadow35 {box-shadow: 0px 0px 0px 9px rgba(0, 0, 0, 0.8);}
.shadow36 {box-shadow: 0px 0px 0px 11px rgba(0, 0, 0, 0.8);}
.shadow37 {box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.8);}
.shadow38 {box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.8);}
.shadow39 {box-shadow: 0px 0px 0px 17px rgba(0, 0, 0, 0.8);}
.shadow40 {box-shadow: 0px 0px 0px 19px rgba(0, 0, 0, 0.8);}

Sample5 - blur, spread

.shadow41 {box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.8);}
.shadow42 {box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.8);}
.shadow43 {box-shadow: 0px 0px 3px 5px rgba(0, 0, 0, 0.8);}
.shadow44 {box-shadow: 0px 0px 3px 7px rgba(0, 0, 0, 0.8);}
.shadow45 {box-shadow: 0px 0px 3px 9px rgba(0, 0, 0, 0.8);}
.shadow46 {box-shadow: 0px 0px 3px 11px rgba(0, 0, 0, 0.8);}
.shadow47 {box-shadow: 0px 0px 3px 13px rgba(0, 0, 0, 0.8);}
.shadow48 {box-shadow: 0px 0px 3px 15px rgba(0, 0, 0, 0.8);}
.shadow49 {box-shadow: 0px 0px 3px 17px rgba(0, 0, 0, 0.8);}
.shadow50 {box-shadow: 0px 0px 3px 19px rgba(0, 0, 0, 0.8);}

Sample6

.shadow51 {box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow52 {box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow53 {box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow54 {box-shadow: 0px 6px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow55 {box-shadow: 0px 8px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow56 {box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow57 {box-shadow: 0px 12px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow58 {box-shadow: 0px 14px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow59 {box-shadow: 0px 16px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow60 {box-shadow: 0px 18px 5px -3px rgba(0, 0, 0, 0.8);} 

Sample7 - inset

.shadow61 {box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;}
.shadow62 {box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.8) inset;}
.shadow63 {box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.8) inset;}
.shadow64 {box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.8) inset;}
.shadow65 {box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, 0.8) inset;}
.shadow66 {box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.8) inset;}
.shadow67 {box-shadow: 0px 0px 11px 7px rgba(0, 0, 0, 0.8) inset;}
.shadow68 {box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.8) inset;}
.shadow69 {box-shadow: 0px 0px 13px 9px rgba(0, 0, 0, 0.8) inset;}
.shadow70 {box-shadow: 0px 0px 14px 10px rgba(0, 0, 0, 0.8) inset;}

Sample8

.shadow71 {box-shadow: 5px 5px 0px 0px #4a148c;}

.shadow72 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a;
 }

.shadow73 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2;
}

.shadow74 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa;
}

.shadow75 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0;
}

.shadow76 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0, 
    30px 30px 0px 0px #ab47bc;
}

.shadow77 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0, 
    30px 30px 0px 0px #ab47bc, 
    35px 35px 0px 0px #ba68c8;
}

.shadow78 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0, 
    30px 30px 0px 0px #ab47bc, 
    35px 35px 0px 0px #ba68c8, 
    40px 40px 0px 0px #ce93d8;
}

.shadow79 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0, 
    30px 30px 0px 0px #ab47bc, 
    35px 35px 0px 0px #ba68c8, 
    40px 40px 0px 0px #ce93d8, 
    45px 45px 0px 0px #e1bee7;
}

.shadow80 {box-shadow:
    5px 5px 0px 0px #4a148c,
    10px 10px 0px 0px #6a1b9a, 
    15px 15px 0px 0px #7b1fa2, 
    20px 20px 0px 0px #8e24aa, 
    25px 25px 0px 0px #9c27b0, 
    30px 30px 0px 0px #ab47bc, 
    35px 35px 0px 0px #ba68c8, 
    40px 40px 0px 0px #ce93d8, 
    45px 45px 0px 0px #e1bee7, 
    50px 50px 0px 0px #f3e5f5;
}

Sample9

.shadow81 {box-shadow: 0px 0px 0px 3px #4a148c inset;}
    
.shadow82 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset;
}

.shadow83 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset;
}

.shadow84 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset;
}

.shadow85 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset;
}

.shadow86 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset,
    0px 0px 0px 18px #ab47bc inset;
}

.shadow87 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset,
    0px 0px 0px 18px #ab47bc inset,
    0px 0px 0px 21px #ba68c8 inset;
}

.shadow88 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset,
    0px 0px 0px 18px #ab47bc inset,
    0px 0px 0px 21px #ba68c8 inset,
    0px 0px 0px 24px #ce93d8 inset;
}

.shadow89 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset,
    0px 0px 0px 18px #ab47bc inset,
    0px 0px 0px 21px #ba68c8 inset,
    0px 0px 0px 24px #ce93d8 inset,
    0px 0px 0px 27px #e1bee7 inset;
}

.shadow90 {box-shadow:
    0px 0px 0px 3px #4a148c inset,
    0px 0px 0px 6px #6a1b9a inset,
    0px 0px 0px 9px #7b1fa2 inset,
    0px 0px 0px 12px #8e24aa inset,
    0px 0px 0px 15px #9c27b0 inset,
    0px 0px 0px 18px #ab47bc inset,
    0px 0px 0px 21px #ba68c8 inset,
    0px 0px 0px 24px #ce93d8 inset,
    0px 0px 0px 27px #e1bee7 inset,
    0px 0px 0px 30px #f3e5f5 inset;
}
    

Button sample

See the Pen Box-shadow Button by MiSolJeong (@Soool) on CodePen.