slicard — A slick, configurable CSS card. One div, zero JS.

slicard

A configurable card with a bright animated edge and a soft outer bloom.<br>Pure CSS , zero JavaScript.<br>No frameworks. No build step.

Try it now →

Read the brief

card · 01<br>Edge of light

380 × 250r 38

radius · 38px

glow · 0.6

edge · 6s

scroll

01

Corners that breathe.

Four independent radii — top-left, top-right, bottom-right, bottom-left . Pull a corner<br>handle on the playground to set one, or toggle Link corners to move them in lockstep.<br>Inner content padding grows with the radius, so type never collides with the curve.

r · 4

r · 16

r · 38

per-corner

02

Tuned to a hue.

Six preset palettes — Azure, Terracotta, Ember, Violet, Teal, Moss — or any custom color<br>via the picker. A single hue drives the fill, the edge, and the bloom together, so<br>every part of the card stays in the same key. Brightness lightens or darkens the<br>body; the gradient angle sets where the light appears to come from.

azureh 206

terracottah 18

emberh 8

violeth 268

tealh 182

mossh 140

brighterl 52

darkerl 24

03

An edge that rotates.

A conic gradient masked to a 1.6 px ring creates a bright arc that sweeps the border<br>forever. Tune the period from a lazy 14 s to a frenetic 2.5 s, or kill the<br>animation entirely and keep the static top-center highlight.

slow · 14s

default · 6s

fast · 2.5s

static · off

04

A soft outer bloom.

A second shadow layer spreads the hue into the surrounding dark — the card doesn't sit on<br>the page, it glows into it. Dial Outer glow from a faint 0 halo to a<br>full 1.0 bloom that bleeds far past the border.

off · 0.00

dim · 0.25

default · 0.55

full · 1.00

05

Copy. Paste. Done.

The export reads your live configuration and emits a single block of standalone CSS — one<br>.slicard<br>class, no dependencies, no custom-property runtime. Drop it in any project.

iOne element. A single is all the markup you need.

iiZero runtime. All values are inlined — no CSS custom-property cascade to maintain.

iiiReduced-motion safe. The animation pauses for users who prefer less motion.

ivEditable later. The output is readable, hand-formatted CSS — not minified soup.

slicard.css · excerpt

/* HTML: */<br>.slicard {<br>position: relative; width: 380px; height: 250px;<br>border-radius: 34px;<br>background:<br>radial-gradient(120% 80% at 50% -10%, hsl(206 70% 88% / .12), transparent 55%),<br>linear-gradient(158deg, hsl(206 56% 47%), hsl(206 48% 19%));<br>box-shadow: 0 0 38px hsl(206 82% 56% / .25), …;

try it now

The playground.

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<br>H 250<br>R 34

#3A86C0<br>slicard

380 × 250r 34

Control Deck

Color & Brightness

#3A86C0<br>hue 206 · sat 55% · light 40%

Brightness40%

Gradient angle158°

Glow Edge

Animation<br>On

Speed6.7s/turn

Outer glow0.55

Reset<br>Surprise

Live CSS · Zero-dependency standalone

copy