Scribd
Upload
9 views1 page

Linear Gradient Grid Pattern Component

The document contains a React component named GridPatternLinearGradient that renders a div with a background and a GridPattern component. The GridPattern is styled with a linear gradient mask image. The component is designed to be responsive and centered within its container.

Uploaded by

steelyx76
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views1 page

Linear Gradient Grid Pattern Component

The document contains a React component named GridPatternLinearGradient that renders a div with a background and a GridPattern component. The GridPattern is styled with a linear gradient mask image. The component is designed to be responsive and centered within its container.

Uploaded by

steelyx76
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

"use client"

import { cn } from "@/lib/utils"


import { GridPattern } from "@/registry/magicui/grid-pattern"
export function GridPatternLinearGradient() {
return (
<div className="bg-background relative flex size-full items-center justify-
center overflow-hidden rounded-lg border p-20">
<GridPattern
width={20}
height={20}
x={-1}
y={-1}
className={cn(
"[mask-image:linear-
gradient(to_bottom_right,white,transparent,transparent)]"
)}
/>
</div>
)
}

You might also like