> For the complete documentation index, see [llms.txt](https://infinitode-docs.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation.md).

# BlurJS Package Documentation

Package documentation for BlurJS, an open-source JavaScript library for creating modern and customizable blurs.

## Changelog

* **1.7 (Latest)**: Added automatic SPA support, rotation animations, animation delays, and `blur-mix-blend-mode`. Scale and rotation animations now use independent CSS transform properties.
* **1.6**: 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 automatically initializes every element with the `blur` class. It maps each supported HTML attribute to the element's styles.

BlurJS also observes DOM changes. Elements added after page load initialize automatically. This supports client-side routed applications and dynamically rendered interfaces. Processed elements use a `WeakSet`, preventing repeated initialization and retained references.

Add a supported property to the `blur` element. Values accept standard CSS syntax, including gradients. See the [BlurJS Reference Documentation](/documentation/package-documentation/blurjs-package-documentation/blurjs-reference-documentation.md) for every property.