Neon Timeline

jitesh208
Jan 28, 2026 6
Live Preview

Live Editor

<div class="timeline-wrap">
  <div class="timeline">

    <!-- Step 1 -->
    <div class="timeline-item">
      <div class="dot"></div>
      <div class="card">
        <h3>Discovery</h3>
        <p>Understanding goals, users, and requirements.</p>
        <span class="badge">Step 01</span>
      </div>
    </div>

    <!-- Step 2 -->
    <div class="timeline-item">
      <div class="dot"></div>
      <div class="card">
        <h3>Design</h3>
        <p>Wireframes, UI design, and prototyping.</p>
        <span class="badge">Step 02</span>
      </div>
    </div>

   

  

  </div>
</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#05070f;
}

/* Timeline container */
.timeline-wrap{
  width:90%;
  max-width:900px;
  height:300px; /* REQUIRED */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Timeline */
.timeline{
  position:relative;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Neon line */
.timeline::before{
  content:"";
  position:absolute;
  top:10%;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#00fff0,#6b7cff,#ff00ff);
  transform:translateY(-50%);
  box-shadow:
    0 0 12px #00fff0,
    0 0 24px #6b7cff,
    0 0 36px #ff00ff;
  border-radius:4px;
}

/* Item */
.timeline-item{
  position:relative;
  z-index:2;
  width:220px;
  text-align:center;
}

/* Dot */
.dot{
  width:22px;
  height:22px;
  margin:0 auto 14px;
  border-radius:50%;
  background:#05070f;
  border:3px solid #00fff0;
  box-shadow:
    0 0 10px #00fff0,
    0 0 20px #00fff0;
}

/* Card */
.card{
  background:rgba(15,18,40,.85);
  border-radius:18px;
  padding:18px;
  color:#fff;
  box-shadow:
    0 0 25px rgba(107,124,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition:.3s ease;
}

.timeline-item:hover .card{
  transform:translateY(-6px) scale(1.02);
  box-shadow:
    0 0 35px rgba(107,124,255,.45),
    0 0 60px rgba(255,0,255,.35);
}

.card h3{
  font-size:18px;
  margin-bottom:6px;
}

.card p{
  font-size:13px;
  opacity:.8;
  line-height:1.4;
}

/* Optional badge */
.badge{
  margin-top:10px;
  display:inline-block;
  padding:5px 12px;
  font-size:12px;
  border-radius:999px;
  background:linear-gradient(135deg,#00fff0,#6b7cff);
  color:#000;
  font-weight:600;
}
Categories

Neon Timeline

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
