30 Pre-made CSS Shadows – Shadow.css

Category: CSS & CSS3 , Recommended | October 8, 2022
Views Total:337 views
Official Page:Go to website
Last Update:October 8, 2022


30 Pre-made CSS Shadows – Shadow.css


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>

You Might Be Interested In:

Leave a Reply