DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
CSS Hover Glow Card< - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
CSS Hover Glow Card<
aartigoyal
Jan 29, 2026
2
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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; }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!