Radial Focus Background

A background that draws attention inward using a subtle radial light source.

HTML

<div class="bg-radial">
  Focus
</div>

<div class="bg-radial">
  Focus
</div>

CSS

.bg-radial {
  width: 200px;
  padding: 2rem 0;
  border-radius: 11px;
  font-size: 13px;
  text-align: center;
  color: #111827;
  background: radial-gradient(
    circle at top,
    #eef2ff,
    #ffffff 70%
  );
}

@media (prefers-color-scheme: dark) {
  .bg-radial {
    color: #e5e7eb;
    background: radial-gradient(
      circle at top,
      #1e1b4b,
      #020617 70%
    );
  }
}

.bg-radial {
  width: 200px;
  padding: 2rem 0;
  border-radius: 11px;
  font-size: 13px;
  text-align: center;
  color: #111827;
  background: radial-gradient(
    circle at top,
    #eef2ff,
    #ffffff 70%
  );
}

@media (prefers-color-scheme: dark) {
  .bg-radial {
    color: #e5e7eb;
    background: radial-gradient(
      circle at top,
      #1e1b4b,
      #020617 70%
    );
  }
}

Notes

• Focus-directed lighting
• No motion required
• Suitable for callouts

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.