CSS Hover Glow Card<

aartigoyal

Jan 29, 2026 2

Live Preview

Live Editor

<div class="card">
  <div class="content">
    <div class="icon">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
        <path d="M12 2L19 21H5L12 2Z"/>
      </svg>
    </div>
    <h3>Hover Glow Card</h3>
    <p>CSS hover effect with SVG icon</p>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:Arial, sans-serif;
}
.card{
  width:280px;
  height:170px;
  border-radius:18px;
  background:#111;
  color:#fff;
  padding:22px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .4s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg,#ff6a00,#ff0066,#6a5cff);
  opacity:0;
  transition:.4s;
}
.card::after{
  content:"";
  position:absolute;
  inset:2px;
  background:#111;
  border-radius:16px;
}
.card:hover{
  transform:translateY(-6px);
}
.card:hover::before{
  opacity:1;
}
.content{
  position:relative;
  z-index:2;
}
.icon{
  width:42px;
  height:42px;
  margin-bottom:14px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon svg{
  width:22px;
  height:22px;
  stroke:#ff6a00;
  transition:.3s;
}
.card:hover .icon svg{
  stroke:#fff;
}
h3{
  margin:0 0 8px;
}
p{
  font-size:14px;
  opacity:.7;
}

Categories

CSS Hover Glow Card<

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

Categories

CSS Hover Glow Card&lt;

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

CSS Hover Glow Card<