Interactive Blurry Background In Vanilla JavaScript – Brusher

Category: Animation , Javascript , Recommended | May 12, 2018
Views Total:1,239 views
Official Page:Go to website
Last Update:May 12, 2018


Interactive Blurry Background In Vanilla JavaScript – Brusher


Brusher is a fancy vanilla JavaScript library to create an interactive background that allows you to reveal the blurred background image with a brush effect.

How to use it:

Installation & download.

# Yarn
$ yarn add brusher
$ npm install brusher --save

Import the brusher.

import Brusher from 'brusher';

Or import the compiled version of the Brusher library into the document.

<script src="//"></script>

Create a new Brush instance and specify an image to blur.

const brusher = new Brusher({
      image: 'bg.png'

Initialize the Brush library and done.


All possible options to customize the interactive background.

const brusher = new Brusher({
      // Put the blur back after user has cleared it
      keepCleared: true,     
      // Stroke size for the brush
      stroke: 80,            
      // Brush style (round, square, butt)
      lineStyle: 'round',    
      // Brusher will use the provided image for the blurry background
      autoBlur: false,       
      // Blur strength in pixels
      autoBlurValue: 15

You Might Be Interested In:

Leave a Reply