WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Card Glow Effect
704
kevekıbhack
Open In Editor
Publish Your Code
Recommended
30 September 2025
CSS Loading Animation with Waves and Ripples
28 March 2025
CSS Sprite-Animation Switcher
18 September 2025
CSS Window Animation HTML Snippet
HTML
Copy
Card Glow
CSS
Copy
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { overflow: hidden; position: relative; width: min(12.5em, 80vmin); aspect-ratio: 1; border-radius: 0.5em; place-self: center; place-content: center; padding: 0.5em; color: #ededed; font: clamp(1em, 2vw + 2vh, 2em) sans-serif; text-align: center; text-transform: uppercase; text-wrap: balance; } .card::before { position: absolute; z-index: -1; inset: -1em; border: solid 1.25em; border-image: conic-gradient(from var(--a), #7997e8, #f6d3ff) 1; filter: blur(0.75em); animation: a 4s linear infinite; content: ""; } @keyframes a { to { --a: 1turn ; } } html, body, div { display: grid; } html { min-height: 100%; } body { background-color: black; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */