I like this enough that I’m putting it here for reference. If anyone tells me how to improve it, I’ll update it here.
The goal is to get some text to have a blurry white background behind it, like this text here. That’s especially useful when there’s an image behind it.
span.blurry-background {
--bgcolor: rgba(256,256,256,50%);
background-color: var(--bgcolor);
box-shadow: 0 0 8px 8px var(--bgcolor);
}Look! A CSS custom property! I am very happy that the code here makes it explicit that those two colors have to be the same. You can change it in one place.
This particular color is defined by rgba, which means red/green/blue (in decimal from 0-256) and then transparency (percentage). This one is half-translucent white.
The background-color style puts that color behind the text. The box-shadow makes an outline. The first two numbers (0 0) are an x and y offset; zeros say to keep the box-shadow on center. Then there’s 8px for blur-radius (those nice blurry edges) and 8px for spread-radius (be bigger than the box itself).
I observe that the blurry background is in front of the text before the span, and behind the text after the span. That wasn’t my intention, but it’s kinda cool, because it makes that backgrounded text really jump out.