Simplest inner glow card animation

index.pug

.card I'm a card with an inner glow

simplest-inner-glow-card-animation.markdown

Simplest inner glow card animation

My solution to a question asked on Reddit.

---

If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:

• being a cool cat 😼🎩 and becoming a patron on Patreon

• making a one time donation via Ko-fi

• making a weekly anonymous donation via Liberapay

• getting me something off my Amazon WishList

🎁 🇺🇸 / 🎁 🇬🇧

• or at least sharing this to show the world what can be done with CSS these days

Thank you!

A Pen by Ana Tudor on CodePen.

License.

style.scss

@property --a { /* must register --a to animate it */
	syntax: '<angle>';
	initial-value: 0deg;
	/* used only on pseudo, nowhere to be inherited, 
	 * better perf if set false, see 
	 * https://www.bram.us/2024/10/03/benchmarking-the-performance-of-css-property/ */
	inherits: false
}

.card {
	/* hide outer part of glow */
	overflow: hidden;
	/* needed for absolutely positioned pseudo */
	position: relative;
	/* adjust width as needed IF it's even necessary to set */
	width: Min(12.5em, 80vmin);
	/* adjust aspect-ratio OR height IF height not given by content */
	aspect-ratio: 1;
	/* round outer card corners */
	border-radius: .5em;
	
	/* text & layout styles below just for prettifying */
	place-self: center;
	place-content: center;
	padding: .5em;
	color: #ededed;
	font: clamp(1em, 2vw + 2vh, 2em) sans-serif;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance
}

.card::before {
	/* grid doesn't work for stacking when a stacked item is text node */
	position: absolute;
	/* place behind card content, so card text is selectable, etc */
	z-index: -1;
	/* best if inset is at least half the border-width with minus */
	inset: -1em;
	/* reserve space for border */
	border: solid 1.25em;
	border-image: 
		/* adjust gradient as needed, I just used a random palette */
		conic-gradient(from var(--a), #669900, #99cc33, #ccee66, 
				#006699, #3399cc, #990066, #cc3399, 
				#ff6600, #ff9900, #ffcc00, #669900) 1;
	/* blur this pseudo */
	filter: blur(.75em);
	/* tweak animation duration as necessary */
	animation: a 4s linear infinite;
	/* needed so pseudo is displayed */
	content: ''
}

/* animate --a from its initial-value 0deg to 1turn */
@keyframes a { to { --a: 1turn } }


/* prettifying and layout stuff, not needed for card glow part */
html, body, div { display: grid }

html { min-height: 100% }

body {
	background: /* just to illustrate card transparency */
		url(https://images.unsplash.com/photo-1729824346255-52a8f898fe84?w=1400) 
			50%/ cover #212121;
	/* darken image (multiplying its RGB channels with 
	 * those of background-color) for better text contrast */
	background-blend-mode: multiply
}