box-shadow
Adds shadow effects. Combines X-offset, Y-offset, blur, spread, color. RGBA creates natural semi-transparent shadows.
Class List
| Class | CSS | Description |
|---|---|---|
bsn | box-shadow: none | Remove shadow |
bsinh | box-shadow: inherit | Inherit parent value |
bsini | box-shadow: initial | Reset to initial value |
bsu | box-shadow: unset | Inherit or initial value |
bs0px1px3px0px000000 | box-shadow: 0px 1px 3px 0px #000000 | HEX shadow (opaque) |
bs0px4px6px0px0-0-0-30 | box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3) | RGBA shadow (semi-transparent) |
bsi0px2px4px0px0-0-0-20 | box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.2) | Inset shadow (inner) |
Visual Comparison
Compares visual differences by shadow intensity. Hover over each box.
None
bsnNo shadow. Default or reset
Subtle
bs0px1px3px0px0-0-0-20Subtle shadow. Cards, input fields
Medium
bs0px4px6px0px0-0-0-30Medium intensity. Popovers, dropdowns
Large
bs0px10px20px0px0-0-0-40Strong shadow. Modals, floating elements
Pattern Analysis
Breaks down each part of a box-shadow class.
bs{X}px{Y}px{B}px{S}px{COLOR}| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Part | Role | Example |
|---|---|---|
bs | box-shadow 접두사 | bs... |
bsi | inset 접두사 (안쪽 그림자) | bsi... |
{X}px | X-offset (가로 이동) | 0px = 수평 이동 없음 |
{Y}px | Y-offset (세로 이동) | 4px = 아래로 4px |
{B}px | Blur (흐림 반경) | 6px = 6px 흐림 |
{S}px | Spread (확산 반경) | 0px = 확산 없음 |
{HEX} | HEX 6자리 색상 | 000000 = 검정 |
{R}-{G}-{B}-{A} | RGBA 색상 (A: 0-100) | 0-0-0-30 = rgba(0,0,0,0.3) |
Common Shadows
Most commonly used shadow patterns in practice.
Subtle
bs0px1px3px0px0-0-0-20box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2)
Medium
bs0px4px6px0px0-0-0-30box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3)
Large
bs0px10px20px0px0-0-0-40box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4)
Inset
bsi0px2px4px0px0-0-0-20box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.2)
<!-- Subtle shadow (card) -->
<div class="bs0px1px3px0px0-0-0-20 bg1E1E2E p2rem br8px">
Light shadow card
</div>
<!-- Medium shadow (dropdown) -->
<div class="bs0px4px6px0px0-0-0-30 bg1E1E2E p16px br8px">
Dropdown menu
</div>
<!-- Large shadow (modal) -->
<div class="bs0px10px20px0px0-0-0-40 bg1E1E2E p2rem br8px">
Modal dialog
</div>
<!-- Inset shadow (input field) -->
<input class="bsi0px2px4px0px0-0-0-20 bg18181B p12px br4px bn cFAFAFA" />HEX vs RGBA
HEX creates opaque shadows; RGBA creates natural semi-transparent shadows.
HEX — opaque
HEXFully opaque color. Strong shadow effect
RGBA — transparent
RGBAOpacity applied. Natural, soft shadow
<!-- HEX (opaque shadow) -->
<div class="bs0px4px6px0px000000 p2rem br8px">
Strong and hard shadow
</div>
<!-- RGBA (Transparent Shadow) — Recommended -->
<div class="bs0px4px6px0px0-0-0-30 p2rem br8px">
Natural and soft shadow
</div>Inset shadow
bsi prefix creates inner shadows. For pressed buttons, input fields, inner depth.
Regular shadow (outer)
bs...Inset shadow (inner)
bsi...<!-- Normal shadow (outer) -->
<div class="bs0px4px6px0px0-0-0-30 p2rem br8px">
Outer shadow
</div>
<!-- Inset shadow (inner) -->
<div class="bsi0px2px4px0px0-0-0-20 p2rem br8px">
Inward pressed effect
</div>
<!-- Inset + HEX Color -->
<div class="bsi2px4px10px0pxFF0000 p2rem br8px">
Red inner shadow
</div>hover shadow
Start with no shadow, add on hover. With tall200msease for smooth transitions.
Hover to see shadow
Hover meHover me<!-- Shadow appears on hover (most common pattern) -->
<div class="bsn hover-bs0px4px12px0px6366F1 tall200msease p2rem br8px cp">
Purple shadow on hover
</div>
<!-- Card hover effect -->
<div class="bg1E1E2E b1pxsolid27272A br8px p2rem
bsn hover-bs0px4px12px0px6366F1 tall200msease cp">
<h3>Card Title</h3>
<p>Shadow smoothly appears on hover</p>
</div>Tips & Notes
RGBA shadows look more natural
HEX is opaque, making shadows harsh. RGBA like 0-0-0-20 blends naturally with background.
Create inner effects with Inset
bsi creates inner shadows. For pressed buttons, input focus, inner depth.
Use with transitions
bsn hover-bs0px4px12px0px6366F1 tall200msease for smooth hover shadows. Common for cards, buttons.
Performance consideration
box-shadow triggers repaints. Large blur on many elements degrades scroll performance. Use minimal blur.