Gradual Blur

Component 22

About

Here is Gradual Blur component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gradual Blur to your project and fits it to your theme.

Code

How Gradual Blur is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Component added by Ansh - github.com/ansh-dhanani

import GradualBlur from '@/components/ui/gradual-blur';

function ExampleSection() {
  return (
    <section style={{ position: 'relative', height: 500, overflow: 'hidden' }}>
      <div style={{ height: '100%', overflowY: 'auto', padding: '6rem 2rem' }}>
        <img
          src="https://cdn.21st.dev/assets/mirror/0a/0afd7457a311e54c7baf509f3a91e716b1198e2573aaf6336982ea6a4bdfcf3d.jpg"
          alt="Unsplash example"
          style={{ width: '100%', height: 'auto', borderRadius: '0.5rem' }}
        />
      </div>

      <GradualBlur
        target="parent"
        position="bottom"
        height="6rem"
        strength={2}
        divCount={5}
        curve="bezier"
        exponential={true}
        opacity={1}
      />
    </section>
  );
}

export default ExampleSection;