30 Pre-made CSS Shadows – Shadow.css

Preview:

Description:

Shadow.css is a collection of 30 CSS-only shadows that are designed for you to quickly add subtle, soft/strong box shadows to block-level elements.

How to use it:

1. Download and import the Shadow.css.

<link rel="stylesheet" href="shadow.css" />

2. Add these CSS shadows to your element. All shadow classes:

• shadow
• shadow-lg
• shadow-sm
• shadow-0 or shadow-none
• shadow-1
• shadow-2
• shadow-3
• shadow-4
• shadow-5
• shadow-6
• shadow-1-inner
• shadow-2-inner
• shadow-3-inner
• shadow-4-inner
• shadow-5-inner
• shadow-6-inner
• shadow-1-strong
• shadow-2-strong
• shadow-3-strong
• shadow-4-strong
• shadow-5-strong
• shadow-6-strong
• shadow-inner

<div class="item shadow">shadow</div>
<div class="item shadow-sm">shadow-sm</div>
<div class="item shadow-lg">shadow-lg</div>
<div class="item shadow-0">shadow-0</div>
<div class="item shadow-inner">shadow-inner</div>
<div class="item shadow-1">shadow-1</div>
<div class="item shadow-2">shadow-2</div>
<div class="item shadow-3">shadow-3</div>
<div class="item shadow-4">shadow-4</div>
<div class="item shadow-5">shadow-5</div>
<div class="item shadow-6">shadow-6</div>
<div class="item shadow-1-soft">shadow-1-soft</div>
<div class="item shadow-2-soft">shadow-2-soft</div>
<div class="item shadow-3-soft">shadow-3-soft</div>
<div class="item shadow-4-soft">shadow-4-soft</div>
<div class="item shadow-5-soft">shadow-5-soft</div>
<div class="item shadow-6-soft">shadow-6-soft</div>
<div class="item shadow-1-strong">shadow-1</div>
<div class="item shadow-2-strong">shadow-2</div>
<div class="item shadow-3-strong">shadow-3</div>
<div class="item shadow-4-strong">shadow-4</div>
<div class="item shadow-5-strong">shadow-5</div>
<div class="item shadow-6-strong">shadow-6</div>