10 Best React Blur Effect Libraries

Curated by the Openbase team and community.Learn more

Curated by the Openbase team and community. Learn more

gatsby-image

Build blazing fast, modern apps and websites with React

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
4.3/ 5
12
Top Feedback
10Easy to Use
9Performant
7Great Documentation
GitHub Stars
52K
Weekly Downloads
173K
Last Commit
3d ago
Bundle Size (min+gzip)
N/A
Not Tree-Shakeable
gbi

gatsby-background-image

Lazy-loading React (multi)background-image component with optional support for the blur-up effect.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
5.0/ 5
1
Top Feedback
N/A
GitHub Stars
258
Weekly Downloads
25K
Last Commit
19d ago
Bundle Size (min+gzip)
13.4KB
Not Tree-Shakeable
rb

react-blur

React component to blur image backgrounds using canvas.

License Icon
License: BSD-3-Clause
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
5.0/ 5
2
Top Feedback
2Easy to Use
1Performant
GitHub Stars
427
Weekly Downloads
385
Last Commit
2mos ago
Bundle Size (min+gzip)
N/A
Not Tree-Shakeable
rlb

react-lazy-blur-image

Load low resolution / placeholder image first and then load the actual image lazily when it's in the viewport.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
5.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Performant
GitHub Stars
3
Weekly Downloads
133
Last Commit
10mos ago
Bundle Size (min+gzip)
4.08KB
Not Tree-Shakeable
rbi

react-blur-image-loader

Blurred progressive image loader for React

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
5.0/ 5
1
Top Feedback
1Easy to Use
1Highly Customizable
GitHub Stars
57
Weekly Downloads
21
Last Commit
4yrs ago
Bundle Size (min+gzip)
11.4KB
Not Tree-Shakeable
rpi

react-progressive-image-loading

Progressively load images using a blur effect.

License Icon
License: Apache-2.0
TypeScript Icon
TypeScript Definitions: Built-In
User Rating
4.0/ 5
1
Top Feedback
1Easy to Use
1Highly Customizable
GitHub Stars
107
Weekly Downloads
490
Last Commit
3yrs ago
Bundle Size (min+gzip)
0.70KB
Not Tree-Shakeable
rcb

react-css-blur

React Component for blurring an element using CSS filters.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User Rating
3.0/ 5
1
Top Feedback
1Easy to Use
1Highly Customizable
GitHub Stars
5
Weekly Downloads
142
Last Commit
5yrs ago
Bundle Size (min+gzip)
0.41KB
Not Tree-Shakeable
rsi

react-strapi-img

react-strapi-img is a wrapper for images, that handles responsive sizes, lazyloading and loading-animation. It is built to consume the image-data from Strapi.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: Built-In
User RatingN/A
Top Feedback
N/A
GitHub Stars
14
Weekly Downloads
98
Last Commit
8mos ago
Bundle Size (min+gzip)
3.02KB
Tree-Shakeable

react-blurhash

React components for blurhash

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: Built-In
User RatingN/A
Top Feedback
N/A
GitHub Stars
328
Weekly Downloads
8K
Last Commit
1yr ago
Bundle Size (min+gzip)
1.18KB
Tree-Shakeable
grb

gl-react-blurhash

Universal gl-react module that implements BlurHash in OpenGL

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: Built-In
User RatingN/A
Top Feedback
N/A
GitHub Stars
4
Weekly Downloads
64
Last Commit
4mos ago
Bundle Size (min+gzip)
1.47KB
Tree-Shakeable
ro

react-onblur

HOC for Blur (Unfocus) event handling of React component

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
4
Weekly Downloads
548
Last Commit
1yr ago
Bundle Size (min+gzip)
1.67KB
Not Tree-Shakeable

react-cloudimage-responsive-blur-hash

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with blur-hash placeholder. Any questions or issues, please report to https://github.com/scaleflex/react-cloudimage-responsive-blur-hash/issues

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
1
Weekly Downloads
9
Last Commit
3mos ago
Bundle Size (min+gzip)
N/A
Not Tree-Shakeable
rp

react-pixelate

React library to pixelate images or elements.

License Icon
License: ISC
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
1
Weekly Downloads
2
Last Commit
7mos ago
Bundle Size (min+gzip)
1.07KB
Not Tree-Shakeable
ri

react-imageblurloader

Image loader using blur.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
4
Weekly Downloads
130
Last Commit
5yrs ago
Bundle Size (min+gzip)
5.45KB
Not Tree-Shakeable
grb

gl-react-blur

Universal gl-react multi-pass gaussian Blur effect with configurable intensity

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
36
Weekly Downloads
48
Last Commit
3yrs ago
Bundle Size (min+gzip)
1.46KB
Not Tree-Shakeable
rbi

react-blur-image

React component for blurred backgrounds.

License Icon
License: ISC
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
2
Weekly Downloads
23
Last Commit
4yrs ago
Bundle Size (min+gzip)
3.21KB
Not Tree-Shakeable
rb

react-blurify

Apply blur effect to children components

License Icon
License: ISC
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
17
Last Commit
N/A
Bundle Size (min+gzip)
0.12KB
Not Tree-Shakeable
rpb

react-page-blur

Blur the page to draw focus, presumedly for showing inactive/loading state or a popup

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
11
Last Commit
N/A
Bundle Size (min+gzip)
N/A
Not Tree-Shakeable
rmp

react-message-preview

Browser centered Message box with blur background.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
8
Last Commit
3yrs ago
Bundle Size (min+gzip)
6.91KB
Not Tree-Shakeable
rlb

react-lazy-blur

The laziest image loader for React.js

License Icon
License: WTFPL
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
7
Last Commit
N/A
Bundle Size (min+gzip)
18.7KB
Not Tree-Shakeable
rbl

react-blur-lazy-image

lazy loading images in progressive way, loads image when its in user's viewport

License Icon
License: WTFPL
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
6
Last Commit
3yrs ago
Bundle Size (min+gzip)
1.70KB
Tree-Shakeable
rgb

react-gaussian-blur

GaussianBlur

License Icon
License: Unknown
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
2
Weekly Downloads
3
Last Commit
4yrs ago
Bundle Size (min+gzip)
1.02KB
Not Tree-Shakeable
rpl

react-progress-loading

Light weight react library to progressively load images using a medium like blur effect.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
3
Last Commit
1yr ago
Bundle Size (min+gzip)
0.69KB
Tree-Shakeable
rpi

react-progressive-image-blur

A progressive image loader with blur transition.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
5
Weekly Downloads
3
Last Commit
4yrs ago
Bundle Size (min+gzip)
11.4KB
Not Tree-Shakeable
rfc

react-focus-component

A react component that brings other components into focus by placing an overlay over all other elements on the page

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
8
Weekly Downloads
2
Last Commit
2yrs ago
Bundle Size (min+gzip)
2.18KB
Not Tree-Shakeable
raw

react-autocomplete-with-blur-and-focus

WAI-ARIA compliant React autocomplete (combobox) component

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
2
Last Commit
5yrs ago
Bundle Size (min+gzip)
4.09KB
Not Tree-Shakeable
rmb

react-mouse-blur

A react component that allows you to add motion blur to your cursor

License Icon
License: MPL-2.0
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
2
Last Commit
N/A
Bundle Size (min+gzip)
38.7KB
Not Tree-Shakeable
rib

react-image-blur

A React component to blur image by canvas

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
2
Last Commit
N/A
Bundle Size (min+gzip)
0.19KB
Not Tree-Shakeable

react-boosted-image

Smarter image component that has a blurred preview and a possibility to use WebP image type. It can also adjust to a device width. Feel free to check it out!

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: DefinitelyTyped
User RatingN/A
Top Feedback
N/A
GitHub Stars
8
Weekly Downloads
1
Last Commit
2yrs ago
Bundle Size (min+gzip)
11.3KB
Tree-Shakeable
rbg

@nju33/react-blurry-gradient

Linear-gradient (using by CSS) animation component for React

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: Built-In
User RatingN/A
Top Feedback
N/A
GitHub Stars
N/A
Weekly Downloads
1
Last Commit
N/A
Bundle Size (min+gzip)
46.4KB
Not Tree-Shakeable
rcb

react-cloudimage-blurhash

Complete rewrite of react-cloudimage-responsive, intended to have all the sme features, use the newest Cloudimage v7 API, and support blurhash.

License Icon
License: MIT
TypeScript Icon
TypeScript Definitions: Built-In
User RatingN/A
Top Feedback
N/A
GitHub Stars
3
Weekly Downloads
1
Last Commit
1yr ago
Bundle Size (min+gzip)
N/A
Tree-Shakeable