taste-skill / Components / Stripe Cards

Stripe Card Component Styles

2 Stripe card containers extracted from stripe.com: backgrounds, 6px radii, borders and shadows, rendered live with CSS and Tailwind code.

Source: computed styles extracted from https://stripe.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Stripe is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Stripe.

Rendered on the Stripe canvas

Card 1

radius 6px · padding 0px 0px

Card 2

radius 6px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`rgba(248, 251, 253, 0.45)`	`none`	`6px`	`0px 0px`	`rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`
2	`#FFFFFF`	`none`	`6px`	`0px 0px`	`rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`

Copy-paste code

Card 1

.card-stripe-1 {
  background:rgba(248, 251, 253, 0.45);
  border:1px solid #E5EDF5;
  border-radius:6px;
  padding:20px;
  box-shadow:rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  backdrop-filter:blur(12px);
}

Card 2

.card-stripe-2 {
  background:#FFFFFF;
  border:1px solid #E5EDF5;
  border-radius:6px;
  padding:20px;
  box-shadow:rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
}

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →

Stripe Card Component Styles

Rendered on the Stripe canvas

Card specs

Copy-paste code

More Stripe

Same component, other brands