# BlurJS Package Documentation

## Changelog

* **1.6 (Latest)**: Added expanded test coverage and improved overall library performance.
* **1.5**: Added `blur-custom` attribute for custom CSS.
* **1.4**: Improved browser compatibility, performance optimizations, and added more usage examples.
* **1.3**: Added animation timing and multiple animation support.
* **1.2**: Added interactivity triggers.
* **1.1**: Added support for animations.
* **1.0**: Initial release.

## Installation

You can download the full source code from [GitHub](https://github.com/Infinitode/blurjs). Alternatively, you can quickly link BlurJS to your HTML files using a script tag and the CDN. We offer 2 versions of BlurJS through the CDN:

Minified:

```html
<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.min.js"></script>
```

Normal:

```html
<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.js"></script>
```

{% hint style="info" %}
**Please note:** You must include BlurJS at the bottom or after all your blur elements in the HTML file, not in `head`, but in `body`. BlurJS also requires that all blurs should be of class `blur` and should be nested inside a parent element with `position: relative` set to it.
{% endhint %}

## How to use BlurJS

BlurJS will automatically find all elements with class `blur` and add them to a list. It will then run through the list and apply the HTML attributes of each element to the element's style. This makes it easier to use and more efficient than vanilla CSS styles for varied blurs.

Just add the property you want to change to the `blur` element, it supports the vanilla CSS property values so it is possible to create advanced blurs that use `linear-gradient`, etc. Check the [list ](https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation/blurjs-reference-documentation)of available properties to use for BlurJS. We'll add more properties soon.