FreeBackgrounds

Spotlight

Use this component for hero copy, feature announcements, empty states, and onboarding panels where a single message needs focus.

ReactTailwind CSSSpotlightBackground

Spotlight
is the new trend.

Draw attention to a specific part of the page with a focused light effect.

Overview

A focused spotlight background for drawing attention to a central message.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<Spotlight />

Spotlight.tsx

tsx

export function Spotlight() {
  return (
    <section className="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-black p-6 text-white">
      <div className="absolute -left-20 -top-20 h-72 w-72 rounded-full bg-white/15 blur-3xl" />
      <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.08)_1px,transparent_1px)] bg-[size:24px_24px] opacity-10" />
      <div className="relative max-w-md text-center">
        <h3 className="text-4xl font-black">
          Spotlight<br />
          is the new trend.
        </h3>
        <p className="mt-3 text-xs leading-relaxed text-zinc-400">
          Draw attention to a specific part of the page with a focused light effect.
        </p>
      </div>
    </section>
  );
}

Spotlight

Spotlightis the new trend.

Overview

Spotlight
is the new trend.