10 Best React Blur Effect Libraries

List hand-picked by Openbase Experts
Learn More

gatsby-image

gatsby-image

The fastest frontend for the headless web. Build modern websites with React.

MIT
TypeScript Icon
TypeScript Definitions: Not Found
TypeScript Icon
Deprecated
GitHub Stars
53.9K
Weekly Downloads
112K
Last Commit
9mos ago
User Rating
4.3/ 5
12
Top Feedback
10Easy to Use
9Performant
7Great Documentation
gbi

gatsby-background-image

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

MIT
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
260
Weekly Downloads
25.7K
Last Commit
1yr ago
User Rating
5.0/ 5
1
Top Feedback
rb

react-blur

React component to blur image backgrounds using canvas.

BSD-3-Clause
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
437
Weekly Downloads
498
Last Commit
1yr ago
User Rating
5.0/ 5
2
Top Feedback
2Easy to Use
1Performant
rbi

react-blur-image-loader

Blurred progressive image loader for React

MIT
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
59
Weekly Downloads
77
Last Commit
5yrs ago
User Rating
5.0/ 5
1
Top Feedback
1Easy to Use
1Highly Customizable
rpi

react-progressive-image-loading

Progressively load images using a blur effect.

Apache-2.0
TypeScript Icon
TypeScript Definitions: Built-In
GitHub Stars
116
Weekly Downloads
387
Last Commit
5yrs ago
User Rating
4.0/ 5
1
Top Feedback
1Easy to Use
1Highly Customizable
react-blurhash

react-blurhash

React components for blurhash

MIT
TypeScript Icon
TypeScript Definitions: Built-In
GitHub Stars
411
Weekly Downloads
10.9K
Last Commit
2yrs ago
grb

gl-react-blur

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

MIT
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
36
Weekly Downloads
62
Last Commit
5yrs ago
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.

MIT
TypeScript Icon
TypeScript Definitions: Built-In
GitHub Stars
12
Weekly Downloads
62
Last Commit
2yrs ago
rfc

react-focus-component

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

MIT
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
8
Weekly Downloads
6
Last Commit
3yrs ago
react-boosted-image

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!

MIT
TypeScript Icon
TypeScript Definitions: Not Found
GitHub Stars
8
Weekly Downloads
1
Last Commit
3yrs ago