WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div>
.card { width: 190px; height: 254px; background: #07182E; position: relative; display: flex; place-content: center; place-items: center; overflow: hidden; border-radius: 20px; } .card h2 { z-index: 1; color: white; font-size: 2em; } .card::before { content: ''; position: absolute; width: 100px; background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); height: 130%; animation: rotBGimg 3s linear infinite; transition: all 0.2s linear; } @keyframes rotBGimg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .card::after { content: ''; position: absolute; background: #07182E; ; inset: 5px; border-radius: 15px; } /* .card:hover:before { background-image: linear-gradient(180deg, rgb(81, 255, 0), purple); animation: rotBGimg 3.5s linear infinite; } */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div>
.card { width: 190px; height: 254px; background: #07182E; position: relative; display: flex; place-content: center; place-items: center; overflow: hidden; border-radius: 20px; } .card h2 { z-index: 1; color: white; font-size: 2em; } .card::before { content: ''; position: absolute; width: 100px; background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); height: 130%; animation: rotBGimg 3s linear infinite; transition: all 0.2s linear; } @keyframes rotBGimg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .card::after { content: ''; position: absolute; background: #07182E; ; inset: 5px; border-radius: 15px; } /* .card:hover:before { background-image: linear-gradient(180deg, rgb(81, 255, 0), purple); animation: rotBGimg 3.5s linear infinite; } */
/* Replace with your JS Code (Leave empty if not needed) */