Shadows Utilities

Add shadows to your elements by applying one of the 6 kinds of shadows available, easy to use just apply the class and a number or just apply shadow. In total there are 8 shading options where you can cancel the shadows or add the one you want.


Shadows examples

The shadows work the same as the HTML heading from 6 to 1 with 1 being the largest and 6 the least.


Hi, I'm no-shadow

Hi, I'm shadow

Hi, I'm shadow-6

Hi, I'm shadow-5

Hi, I'm shadow-4

Hi, I'm shadow-3

Hi, I'm shadow-2

Hi, I'm shadow-1

<div class="e-x no-shadow">...</div>
<div class="e-x shadow">...</div>
<div class="e-x shadow-6">...</div>
<div class="e-x shadow-5">...</div>
<div class="e-x shadow-4">...</div>
<div class="e-x shadow-3">...</div>
<div class="e-x shadow-2">...</div>
<div class="e-x shadow-1">...</div>

Examples of shadows with background

The shadows work the same as the HTML heading from 6 to 1 with 1 being the largest and 6 the least.


Hi, I'm shadow

Hi, I'm shadow-6

Hi, I'm shadow-5

Hi, I'm shadow-4

Hi, I'm shadow-3

Hi, I'm shadow-2

Hi, I'm shadow-1

<div class="e-x no-shadow">...</div>
<div class="e-x shadow">...</div>
<div class="e-x shadow-6">...</div>
<div class="e-x shadow-5">...</div>
<div class="e-x shadow-4">...</div>
<div class="e-x shadow-3">...</div>
<div class="e-x shadow-2">...</div>
<div class="e-x shadow-1">...</div>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2020
eFrolic | framework css 2020

One-time donation


Donate
eFrolic | framework css 2020
eFrolic | framework css 2020

Serious sponsor


Become a Patron