Background snippets

Heroes 69

About

Here is Background snippets component

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

Code

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

Usage.tsx

export default function Component() {
  return (
    <div className="fixed inset-0 -z-10 bg-white">
      <div
        className={[
          "pointer-events-none absolute inset-0",
          // grid
          "bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)]",
          "bg-[size:14px_24px]",
          // fade the grid with a top-centered radial mask
          "[mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_75%,transparent_110%)]",
          "[-webkit-mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_75%,transparent_110%)]",
          "[mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]",
        ].join(" ")}
      />
    </div>
  );
}