Glare Hover

A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).

MMagic UI·byMUMagic UIPro

6,202

Bookmarks

10,402

Installs

115,002

Views

66 lines

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { GlareHover } from "@/components/ui/glare-hover"

export default function PricingCard() {
  return (
    <GlareHover className="rounded-xl" duration={600}>
      <Card className="w-[340px]">