Command Palette

Search for a command to run...

Loading component...

Components free Progressive Blur

Progressive Blur

A lightweight CSS-only utility that applies progressive blur effects on top of text content. Creates elegant visual depth with customizable gradient overlays and backdrop filters for enhanced readability and visual appeal.

Dependencies

react

Interaction Type

Scroll to see the text reveal effect
Lightweight css only

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper41

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper41.json

How to use ProgressiveBlur Component

import { ProgressiveBlur } from "@/components/v1/skiper41";

const DemoSkiper41 = () => {
  return (
    <main className="relative h-full w-full bg-[#f5f4f3]">
      <ProgressiveBlur position="top" backgroundColor="#f5f4f3" />
      <ProgressiveBlur position="bottom" backgroundColor="#f5f4f3" />
      {/* content */}
    </main>
  );
};

Manual Implementation with inline css

const DemoSkiper41 = () => {
  return (
    <main className="relative h-full w-full">
      <div
        className="pointer-events-none fixed left-0 top-0 w-full select-none"
        style={{
          height: "150px",
          background: "linear-gradient(to bottom, transparent, #f5f4f3)",
          maskImage: "linear-gradient(to top, #f5f4f3 50%, transparent)",
          WebkitBackdropFilter: "blur(4px)",
          backdropFilter: "blur(4px)",
          WebkitUserSelect: "none",
          userSelect: "none",
        }}
      />
      {/* content */}
    </main>
  );
};
Props
Description

className

Additional classes

backgroundColor

Background color

position

Position of the blur effect

height

Height of the blur area 150px is good

blurAmount

Blur amount 4-8 px is good

Blur usage warning

Most browsers can hardware-accelerate blur up to around 10px efficiently Memory usage: Higher blur values require more memory for the blur calculations

  • Start with 4-6px for subtle effects
  • Use 8-10px for more pronounced effects
  • Avoid values above 15px unless absolutely necessary Can cause noticeable frame drops, especially on mobile devices

Attribution

Inspired by and adapted from devouringdetails.com

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext