Background snippets | Community Components - 21st | 21st

/Background snippets/

Background snippets

Here is Background snippets component

Install

npx shadcn@latest add https://21st.dev/r/bg.ibelick/background-snippets

Loading preview...

export default function Component() {
  return (
    <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
  );
}

More examples

Background snippetsOpen page →

Loading preview...

Background RadialOpen page →

Loading preview...

Background Radial topOpen page →

Loading preview...

Background Blur Purple Open page →

Loading preview...

Background Radial PurpleOpen page →

Loading preview...

Background Radial VioletOpen page →

Loading preview...

Background Grid FuchsiaOpen page →

Loading preview...

Background Grid BlueOpen page →

Loading preview...

Background Dots GrayOpen page →

Loading preview...

Background Dots Masked GrayOpen page →

Loading preview...

Background Grid Light GrayOpen page →

Loading preview...

Background Grid Masked Dark GrayOpen page →

Loading preview...

Background Radial Black VioletOpen page →

Loading preview...

Background Radial Dark PurpleOpen page →

Loading preview...

Background Blur Fuchsia 1Open page →

Loading preview...

Background Radial Dark GrayOpen page →

Loading preview...

Published

9/2/2025

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Install

Dependencies

Tags

Install

Dependencies

Tags

Background snippets

Install

More examples

Published

Similar components