Schatten CSS

Schatten CSS is a lightweight CSS library designed to make it easy for developers to add drop shadows to their elements.

Getting Started

To get started with Schatten CSS, simply include the css file into your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/schatten-css/dist/schatten.min.css">

Alternatively, you can download the file from the Schatten CSS GitHub repository and include it in your project manually.

Usage

To add a drop shadow to an element, simply add the class schatten-[level] to the element. The [level] can be any number from 1 to 24.

<div class="schatten-4">Add a light drop shadow to this element.</div>

You can also add multiple shadows to an element, by adding multiple classes:

<div class="schatten-2 schatten-4 schatten-6">Add multiple drop shadows to this element.</div>

Customization

If you want to customize the color, size, or other properties of the shadows, you can do so by modifying the CSS variables in your own stylesheet.

:root {
  --schatten-color: rgba(0, 0, 0, 0.2);
  --schatten-size: 5px;
  --schatten-blur: 10px;
  --schatten-spread: -5px;
}

Conclusion

With Schatten CSS, you can quickly and easily add drop shadows to your elements, without having to write any complicated CSS code. Get started with Schatten CSS today and take your web design to the next level!