Progressive blurPro

Content sinks into a deepening blur at the edges of a scroll area.

BButtons
IInputs
CCards
TToasts
TTabs
MModals
MMenus
TTooltips
SSliders
BBadges
BButtons
IInputs
CCards
TToasts
TTabs
MModals
MMenus
TTooltips
SSliders
BBadges

Props

items

edges

size72px

strength10px

steps6

tint

Appearance

Applies to this component only and stays saved when you come back.

Accent

#ff3347

Deep shade

#b3122a

Preview background

Install

$npx nex-ui add progressive-blur

Usage

import { BlurEdges } from "@/components/nex-ui/progressive-blur";

<BlurEdges
  items={["Buttons", "Inputs", "Cards", "Toasts", "Tabs", "Modals", "Menus", "Tooltips", "Sliders", "Badges"]}
/>

This is a Pro component

You can try the preview. The source and CLI install unlock with Pro.

Get Pro