Back to Snippets

Modern Grid Spotlight Effect JS

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.

#javascript

#css

#grid

#spotlight

#glow

#hover effect

#linear design

#ui

/HTML *CSS ()JS Output Live Updates

*, *::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;
}

<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>

Modern Grid Spotlight Effect JS

Share Code Snippet