InFeeo
Language

Show HN: A minimal and beautiful card component built with pure CSS(github.com)

×
Link preview GitHub - ufoym/slicard: A slick, configurable CSS card. One div, zero JS. A slick, configurable CSS card. One div, zero JS. Contribute to ufoym/slicard development by creating an account on GitHub. GitHub · github.com
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.

Drag edges to resize · drag corners to set radii · drag inside to move. Tweak color and animation in the deck, then copy the CSS.

Log in Log in to comment.

No comments yet.