A configurable card with a bright animated edge and a soft outer bloom. Pure CSS, zero JavaScript. No frameworks. No build step.
card · 01
380 × 250r 38
radius · 38px
glow · 0.6
edge · 6s
scroll
01
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.
02
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.
03
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.
04
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.
05
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.
i
One element. A single <div class="slicard"> is all the markup you need.
ii
Zero runtime. All values are inlined — no CSS custom-property cascade to maintain.
iii
Reduced-motion safe. The animation pauses for users who prefer less motion.
iv
Editable later. The output is readable, hand-formatted CSS — not minified soup.
slicard.css · excerpt
/* 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), …; }
try it now
Drag edges to resize · drag corners to set radii · drag inside to move. Tweak color and animation in the deck, then copy the CSS.
Link corners
W 380 H 250 R 34
#3A86C0
380 × 250r 34
Live CSS · Zero-dependency standalone
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。