React component for blurred backgrounds.
Switch branches/tags
Nothing to show
Clone or download
javierbyte Merge pull request #20 from vtsyganov/fix-resize-listener
Bug Fix: make resize method a prop in order to fix resize listner
Latest commit ee4e487 Mar 11, 2018

React Blur

styled with prettier

React component for creating blurred backgrounds using canvas.

Live demo



npm install react-blur --save


var Blur = require('react-blur');


<Blur img='/directory/img.jpg' blurRadius={5} enableStyles>
  The content.

For a complete example see the code in the demo branch.


  • img: The image path.
  • blurRadius: Optional. The size of the blur radius.
  • enableStyles: Optional. Flag to include base styles inline, omit this to easily override.
  • shouldResize: Optional. If the canvas should re-render on resize? Defaults to true.
  • resizeInterval: Optional. How fast the canvas should re-render on resize? Defaults to 128ms.


Please install yarn and use it to manage dependencies and the lockfile.

Thanks to Quasimodo for the original stack blur algorithm.