ReactBits

GradualBlur

Progressive backdrop-blur layers that fade content out at the edges. Supports presets, responsive sizing, and scroll animation.

Bottom blur (scrollable content)

Line 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 11: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 13: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 14: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 15: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 16: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 17: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 18: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 19: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Line 20: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula quis nunc scelerisque hendrerit a eu sapien.

Top blur (intense preset)

Line 1: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 2: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 3: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 4: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 5: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 6: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 7: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 8: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 9: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 10: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 11: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 12: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 13: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 14: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 15: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 16: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 17: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 18: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 19: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Line 20: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Both edges (stacked)

Line 1: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 2: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 3: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 4: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 5: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 6: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 7: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 8: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 9: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 10: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 11: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 12: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 13: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 14: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 15: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 16: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 17: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 18: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 19: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line 20: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.