Interactive Box & Text Shadow Library – ShadowCSS

Preview:

Description:

A CSS only shadow library that applies customizable interactive shadows to block elements and text.

Shadow size and position can be customized via CSS classes.

How to use it:

1. Import the ShadowCSS into the document.

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

2. Apply a smooth shadow to block elements. Possible configuration classes:

• box-shadow: Required
• centered-smooth-sm
• centered-smooth-md
• centered-smooth-lg
• top-left-smooth
• top-smooth
• top-right-smooth
• bottom-left-smooth
• bottom-smooth
• bottom-right-smooth
• animation: With hover animations
• animation-top-left
• animation-top
• animation-top-right
• animation-bottom-left
• animation-bottom
• animation-bottom-right

<div class="box-shadow centered-smooth-sm">
  Smooth Shadows
</div>

3. Apply a sharp shadow to block elements. Possible configuration classes:

• box-shadow: Required
• centered-sharp-sm
• centered-sharp-md
• centered-sharp-lg
• top-left-sharp
• top-sharp
• top-right-sharp
• bottom-left-sharp
• bottom-sharp
• bottom-right-sharp
• animation: With hover animations
• animation-top-left
• animation-top
• animation-top-right
• animation-bottom-left
• animation-bottom
• animation-bottom-right

<div class="box-shadow top-sharp">Sharp Shadows</div>

4. Apply a square shadow to block elements. Possible configuration classes:

• box-shadow: Required
• top-left-square-sm
• top-square-sm
• top-right-square-sm
• bottom-left-square-sm
• bottom-square-sm
• bottom-right-square-sm

<div class="box-shadow top-left-square-sm">Square Shadow</div>

5. Apply a neon shadow to block elements. Possible configuration classes:

• box-shadow: Required
• neon-green
• neon-green-sm
• neon-green-md
• neon-green-lg
• neon-blue
• neon-blue-sm
• neon-blue-md
• neon-blue-lg
• neon-red
• neon-red-sm
• neon-red-md
• neon-red-lg

<div class="box-shadow neon-green-sm">NEON Shadow</div>

6. Apply a fancy shadow to text. Possible shadow effects:

• neon
• flaming
• glowing
• outline
• retro
• floating
• blocks

<div class="text-shadow neon">Shadow</div>
<div class="text-shadow flaming">Shadow</div>
<div class="text-shadow glowing">Shadow</div>
<div class="text-shadow outline">Shadow</div>
<div class="text-shadow retro">Shadow</div>
<div class="text-shadow floating">Shadow</div>
<div class="text-shadow blocks">Shadow</div>