Puppertino

/

Examples

/

Shadows

# Shadows & Blur

Shadows are not so common on iOS or MacOS. But having a curated collection of shadows can help your interface, which is why I added it! You can use Shadows by downloading the CSS of Shadows & Blur or downloading the full CSS (Not recommended if you are just going to use this component).

## General Usage of the Shadows.

Shadows are very simple, just a simple class will do. There are 4 shadow types currently, which are:

`p-shadow-1`
`p-shadow-2`
`p-shadow-3`
`p-shadow-4`

Usage:

    <div class="p-shadow-1"></div>

    <div class="p-shadow-2"></div>

    <div class="p-shadow-3"></div>

    <div class="p-shadow-4"></div>

## Shadow transition.

Sometimes you want to add that effect of depth when the user hovers over your elements and we get that. And how do we achieve that? Hover classes! Usage is similar to the default shadows, just add `to` after the `p-`, like so `p-to-shadow-1`. Or just copy the classes below:

`Hover over me!
p-to-shadow-1`
`Hover over me!
p-to-shadow-2`
`Hover over me!
p-to-shadow-3`
`Hover over me!
p-to-shadow-4`

Usage:

    <div class="p-to-shadow-1"></div>

    <div class="p-to-shadow-2"></div>

    <div class="p-to-shadow-3"></div>

    <div class="p-to-shadow-4"></div>

## Blur

Blur is used pretty commonly along macOS and iOS apps, we have created a collection of curated blur levels for your usage in your apps. Keep in mind that blur levels also include a background, that you can override if you desire.

p-blur-1

p-blur-2

p-blur-3

p-blur-4

Usage:

    <div class="p-blur-1"></div>

    <div class="p-blur-2"></div>

    <div class="p-blur-3"></div>

    <div class="p-blur-4"></div>