// pricing
Pro plan
Everything in Starter, plus unlimited projects, custom domains, and priority support.
back to the workshop
// production_tools · cargo/10
CSS Effect Lab
Hard CSS effects, built right. Pick one, tweak it, copy code that actually works.
A crisp edge with soft colored light radiating outward from it.
controls
// css
.glow-border {
position: relative;
border-radius: 16px;
}
.glow-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid #FB923C;
filter: blur(16px);
opacity: 0.77;
pointer-events: none;
}
.glow-border::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 2.05px solid #FB923C;
opacity: 0.81;
pointer-events: none;
}
// html
Works on any single element. No special markup needed: add the class to the element you want the effect on.
// requirements
Needs a positioning context. position: relative is baked into the recipe so the ::before and ::after layers anchor to the element box. Drop the class on any element that can carry pseudo-elements.