Gradient Background

A configurable, positioned gradient blur effect for backgrounds.

Preview

Centered Gradient

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/gradient-background.json

Usage

tsx
13 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
import { GradientBackground } from "@/components/ui/gradient-background"

export default function HeroSection() {
  return (
    <div className="relative w-full h-[500px] overflow-hidden">
       <GradientBackground position="center" intensity="high" />
       
       <div className="relative z-10">
          <h1>My Hero Title</h1>
       </div>
    </div>
  )
}

Examples

Positions

position="left"
position="center"
position="right"

Intensities

intensity="low"
intensity="medium"
intensity="high"

Props

PropTypeDescription
position"left" | "center" | "right"Horizontal position of the gradient blob (default: 'center').
intensity"low" | "medium" | "high"Opacity and blur intensity (default: 'medium').
classNamestringAdditional CSS classes
childrenReactNodeOptional children to render inside the wrapper (though usually this component is used as a background layer).