A configurable card with a bright animated edge and a soft outer bloom. Pure CSS, zero JavaScript. No frameworks. No build step.
Four independent radii — top-left, top-right, bottom-right, bottom-left. Pull a corner handle on the playground to set one, or toggle Link corners to move them in lockstep. Inner content padding grows with the radius, so type never collides with the curve.
Six preset palettes — Azure, Terracotta, Ember, Violet, Teal, Moss — or any custom color via the picker. A single hue drives the fill, the edge, and the bloom together, so every part of the card stays in the same key. Brightness lightens or darkens the body; the gradient angle sets where the light appears to come from.
A conic gradient masked to a 1.6 px ring creates a bright arc that sweeps the border forever. Tune the period from a lazy 14 s to a frenetic 2.5 s, or kill the animation entirely and keep the static top-center highlight.
A second shadow layer spreads the hue into the surrounding dark — the card doesn't sit on the page, it glows into it. Dial Outer glow from a faint 0 halo to a full 1.0 bloom that bleeds far past the border.
The export reads your live configuration and emits a single block of standalone CSS — one
.slicard
class, no dependencies, no custom-property runtime. Drop it in any project.
<div class="slicard"> is all the markup you need./* HTML: <div class="slicard"></div> */ .slicard { position: relative; width: 380px; height: 250px; border-radius: 34px; background: radial-gradient(120% 80% at 50% -10%, hsl(206 70% 88% / .12), transparent 55%), linear-gradient(158deg, hsl(206 56% 47%), hsl(206 48% 19%)); box-shadow: 0 0 38px hsl(206 82% 56% / .25), …; }
Drag edges to resize · drag corners to set radii · drag inside to move. Tweak color and animation in the deck, then copy the CSS.