Gradual Blur

Content blurs progressively toward one edge, like a frosted fade. Place it in a relative container, or pin it to the viewport.

import { GradualBlur } from "pleate/effects/gradual-blur";

Bottom edge of a scroll area

Row 1: scroll to see the edge blur

Row 2: scroll to see the edge blur

Row 3: scroll to see the edge blur

Row 4: scroll to see the edge blur

Row 5: scroll to see the edge blur

Row 6: scroll to see the edge blur

Row 7: scroll to see the edge blur

Row 8: scroll to see the edge blur

Row 9: scroll to see the edge blur

Row 10: scroll to see the edge blur

Row 11: scroll to see the edge blur

Row 12: scroll to see the edge blur

Row 13: scroll to see the edge blur

Row 14: scroll to see the edge blur

position

Edge that blurs.

"top" | "bottom" | "left" | "right"default "bottom"

size

Depth of the band (CSS length).

stringdefault "6rem"

strength

Blur at the edge in px.

numberdefault 12

layers

Stacked layers: smoother but costlier.

numberdefault 5

fade

Also fade to the page background.

booleandefault false

fixed

Pin to the viewport edge.

booleandefault false