BlurJS is a lightweight JavaScript library that allows you to easily add customizable soft blur effects to your web pages.
It gives you fine-grained control over the blur appearance through CSS-like attributes for setting the blur width, height, strength, color, z-index, positioning, and more.
How to use it:
1. Download the library and add the ‘blur.min.js’ script to the page.
<script src="blur.js"></script>
2. Add a basic blur overlay to the page.
<div class="blur"></div>
3. Customize the blur effect with the following props.
- blur-width: Width of the blur effect.
- blur-height: Height of the blur effect.
- blur-amount: Strength of the blur effect.
- blur-background: Color (or gradients) of the blur effect.
- blur-z-index: CSS z-Index of the blur effect.
- blur-top: Top position.
- blur-left: Left Position.
- blur-right: Right Position.
- blur-bottom: Bottom Position.
- blur-border-radius: Border radius of the blur effect.
- blur-grain: Enable grainy texture. no default assigned
- blur-scale: Scale to this value. If present triggers a scale animation to that value. no default assigned
- blur-scale-duration: Duration in ms
- blur-scale-repetitions: The number of repetitions of the scale animation
- blur-scale-timing: Optional timing value for the scale animation. default linear
- blur-translate-x: Translate on the x-axis.
- blur-translate-x-duration: Duration in ms
- blur-translate-x-repetitions: The number of repetitions of the translate animation
- blur-translate-y: Translate on the y-axis.
- blur-translate-y-duration: Duration in ms
- blur-translate-y-repetitions: The number of repetitions of the translate animation
- blur-translate-y-timing: Optional timing value for the translation animation
- blur-opacity: Opacity level
- blur-opacity-duration: Duration in ms
- blur-opacity-repetitions: The number of repetitions of the fade animation
- blur-opacity-timing: Optional timing value for the opacity animation
- blur-animate: Transition to this value.
- blur-animate-duration: Duration in ms
- blur-animate-repetitions: The number of repetitions of the transition animation
- blur-animate-timing: Optional timing value for the blur animation
- blur-interaction: Trigger event. ‘scroll’, ‘click’, or ‘hover’
<div
class="blur"
blur-width="50px"
blur-height="50px"
blur-amount="25px"
blur-background="red"
blur-z-index="99"
blur-top="0"
blur-left="0"
blur-right=""
blur-bottom=""
blur-border-radius="5rem 2rem 5rem 50%">
Default
</div>
Changelog:
v1.4.0 (10/27/2025)
- Added a blur-custom attribute for custom CSS. This is useful for adding CSS that isn’t supported by BlurJS out of the box.
v1.4.0 (06/30/2025)
- Support for more browsers, using vendor prefixes where needed.
- Performance optimizations by refactoring and cleaning code.
v1.3.0 (01/07/2025)
- BlurJS now supports using multiple animations in one single element. You can combine animations and change their easing, duration, and repetitions to create unique and fun interactions/animations. New blur-{animation-type}-timing parameter for controlling easing during animations.
v1.2.0 (07/04/2024)
- Moved the for loop to loop per element, improving stability and performance.
- Created implementations for interactions with blur elements using the blur-interaction attribute.
- Updated the code to also have attributes for controlling pointer events and user selection.
The post Create Dreamy Blur Effects With The BlurJS Library appeared first on CSS Script.