Card Studio — Premium Web Card Designer

Card shape & size ›

Width

Auto height (fit content)

Fixed height

Inner padding

Content gap (between sections)

Corners & radius ›

Link all corners

Radius

Top-left

Top-right

Bottom-left

Bottom-right

Borders ›

Border width

Style

Border color

Tip: set style to Double above for a classic double line.

Framed border (shaded margin + ring)

Margin width (gap band)

Ring width

Margin shade

Ring color

Shade opacity

Background ›

Fill type

Background color

Transparency

100% = solid, 0% = fully transparent (shows what's behind the card).

Hue shift

From

Angle

Card shapes ›

Let shapes cross the card edge

On, a shape can sit offset over the edge. Off, shapes stay clipped inside the card.

Drag a shape in the preview to move it; drag its bottom right corner to resize.

Shadow & depth ›

Drop shadow

Offset X

Offset Y

Blur

Spread

Shadow color

Opacity

Motion & hover ›

Hover lift animation

The card rises and its shadow deepens on hover. Respects prefers-reduced-motion.

Lift height

Hover shadow strength

Title bar ›

Show title bar

Title text

Subtitle (optional)

Text align

Bar background

Text color

Title size

Divider under title

Icon in bar

Icon side

Icon size (relative to title text)

Scales the in-bar icon up or down against the title it shares its row with.

Content sections ›

Output options ›

CSS class prefix

Used for generated class names, e.g. .card, .card__title.

Scope CSS under the card class

Keeps generated styles from leaking into the rest of your page.

Include helpful comments

Live preview

Copied