GradientBlur component

A zero-depedency React component to create a pure CSS progressive blur on top of any element.

yarn install @maxbonhomme/ui

// index.tsx
import { GradientBlur, Direction } from "@maxbonhomme/ui"

const Component = () => (
  <GradientBlur direction={Direction.TO_BOTTOM} />
)

// index.jsx
import { GradientBlur } from "@maxbonhomme/ui"

const Component = () => (
  <GradientBlur direction='to bottom' />
)

Photos credits

Tom Morbey on Unsplash