BlurJS Usage Examples

Simple usage examples for getting started with BlurJS.

1. Create a Basic HTML File

Firstly we're going to create a basic HTML file, with just a parent div and a child div.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blur Example</title>
    <style>
        .parent {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="blur"></div>
    </div>
</body>
</html>

2. Add BlurJS

Now, let's add BlurJS to the project. For faster loading, we're going to use the minified version of BlurJS. Add this script tag at the bottom, just before the ending </body> tag.

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

3. Make Magic

After you've done that, let's finally make some magic!

Add this next to <div class="blur", remember to put a space between them.

blur-width="50px" blur-height="50px"

You can experiment with adding other values as the height or width, like 100% or even 6em.

You can also experiment with adding other properties, like for instance, moving the blur around using blur-left or blur-top.
You can change the blur size, color, blur amount, and even the z-index, allowing you to position your blur above or below other elements.

4. The End

Now that you've made some pretty cool blurs, why not let your creativity flow? Build brand new modern sites using BlurJS, or, who knows, even spice up some of your old sites with some carefully placed colored gradient blurs.

We'd love to see what you've created, be sure to tag us on X/Twitter @InfinitodeLTD when you share your BlurJS implementation using #BlurJS.

PreviousBlurJS Package Documentation NextBlurJS Reference Documentation

Last updated 1 month ago