# 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 ](/documentation/package-documentation/blurjs-package-documentation/blurjs-reference-documentation.md)of available properties to use for BlurJS. We'll add more properties soon.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.