About this snippet

Create an immersive experience with a modern grid spotlight effect. As your cursor moves, a subtle glowing gradient illuminates the borders of the cards, which looks highly premium.

Size
4.0 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
198

Collections

Related snippets

<div class="spotlight-wrapper">
  <div class="spotlight-header">
    <h2>Next-Gen Platform</h2>
    <p>Hover over the features below to reveal the interactive spotlight glow.</p>
  </div>
  
  <div class="spotlight-grid" id="spotlight-grid">
    <div class="spotlight-card">
      <div class="card-inner">
        <div class="icon-circle">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
        </div>
        <h3>Lightning Fast</h3>
        <p>Built with modern APIs and zero heavy dependencies so your site loads instantly.</p>
      </div>
    </div>
    
    <div class="spotlight-card">
      <div class="card-inner">
        <div class="icon-circle">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>
        <h3>Ultra Secure</h3>
        <p>Your data is protected by industry-leading encryption and security standards.</p>
      </div>
    </div>
    
    <div class="spotlight-card">
      <div class="card-inner">
        <div class="icon-circle">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
        </div>
        <h3>Global Reach</h3>
        <p>Deploy your application to a global edge network with just a single click.</p>
      </div>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 40px 20px;
}

.spotlight-wrapper {
  width: 100%;
  max-width: 1000px;
}

.spotlight-header {
  text-align: center;
  margin-bottom: 50px;
}

.spotlight-header h2 {
  color: #f8fafc;
  font-size: 2.5rem;
  margin: 0 0 10px 0;
}

.spotlight-header p {
  color: #94a3b8;
  font-size: 1.125rem;
  margin: 0;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  position: relative;
}

.spotlight-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 2px;
  overflow: hidden;
}

/* The radial gradient glow that follows the mouse */
.spotlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(59, 130, 246, 0.4), transparent 40%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight-grid:hover .spotlight-card::before {
  opacity: 1;
}

.card-inner {
  position: relative;
  background: #0f172a;
  border-radius: 14px;
  height: 100%;
  padding: 30px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.icon-circle {
  width: 48px;
  height: 48px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.card-inner h3 {
  color: #f8fafc;
  margin: 0 0 12px 0;
  font-size: 1.25rem;
}

.card-inner p {
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}
const grid = document.getElementById("spotlight-grid");
const cards = document.querySelectorAll(".spotlight-card");

grid.addEventListener("mousemove", function(e) {
  cards.forEach(function(card) {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Pass the coordinates directly to CSS variables
    card.style.setProperty("--mouse-x", x + "px");
    card.style.setProperty("--mouse-y", y + "px");
  });
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save