taste-skill / Components / Clerk Cards

Clerk Card Component Styles

7 Clerk card containers extracted from clerk.com: backgrounds, 16.5px/8px/6px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Clerk canvas

Card 1

radius 16.5px · padding 0px 0px

Card 2

radius 8px · padding 0px 0px

Card 3

radius 8px · padding 0px 0px

Card 4

radius 6px · padding 0px 0px

Card 5

radius 12px · padding 0px 0px

Card 6

radius 8px · padding 0px 0px

Card 7

radius 5.288px 0px 0px 5.288px · padding 26.4px 21.12px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`transparent`	`none`	`16.5px`	`0px 0px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.188081 0.0016512 -0.00579907 / 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
2	`#FFFFFF`	`none`	`8px`	`0px 0px`	`rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.05) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.05) 0px 6px 6px -3px, rgba(19, 19, 22, 0.05) 0px 12px 12px -6px, rgba(19, 19, 22, 0.05) 0px 24px 24px -12px`
3	`#F7F7F8`	`none`	`8px`	`0px 0px`	`rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.05) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.05) 0px 6px 6px -3px, rgba(19, 19, 22, 0.05) 0px 12px 12px -6px, rgba(19, 19, 22, 0.05) 0px 24px 24px -12px`
4	`transparent`	`none`	`6px`	`0px 0px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.09) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
5	`#FFFFFF`	`none`	`12px`	`0px 0px`	`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px -8px`
6	`#F7F7F7`	`none`	`8px`	`0px 0px`	`rgba(0, 0, 0, 0.08) 0px 16px 28px -4px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px`
7	`#FFFFFF`	`none`	`5.288px 0px 0px 5.288px`	`26.4px 21.12px`	`rgba(0, 0, 0, 0.06) 0px 0px 0px 0.661px, rgba(0, 0, 0, 0.06) 0px 0.661px 1.322px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1.322px 0px`

Copy-paste code

Card 1

.card-clerk-1 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.06);
  border-radius:16.5px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.188081 0.0016512 -0.00579907 / 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

Card 2

.card-clerk-2 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 0, 0.06);
  border-radius:8px;
  padding:20px;
  box-shadow:rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.05) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.05) 0px 6px 6px -3px, rgba(19, 19, 22, 0.05) 0px 12px 12px -6px, rgba(19, 19, 22, 0.05) 0px 24px 24px -12px;
}

Card 3

.card-clerk-3 {
  background:#F7F7F8;
  border:1px solid rgba(0, 0, 0, 0.06);
  border-radius:8px;
  padding:20px;
  box-shadow:rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.05) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.05) 0px 6px 6px -3px, rgba(19, 19, 22, 0.05) 0px 12px 12px -6px, rgba(19, 19, 22, 0.05) 0px 24px 24px -12px;
}

Card 4

.card-clerk-4 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.06);
  border-radius:6px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.09) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

More Clerk

Clerk full token spec Clerk style guide Clerk Pricing Table Clerk vs WorkOS Vercel vs Clerk Supabase vs Clerk Clerk vs Upstash

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Mintlify Cards Cal.com Cards Dub Cards Turso Cards Upstash Cards

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

See taste-skill Pro →