taste-skill / Components / Cursor Cards

Cursor Card Component Styles

4 Cursor card containers extracted from cursor.com: backgrounds, 10px/8px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Cursor canvas

Card 1

radius 10px · padding 0px 0px

Card 2

radius 8px · padding 0px 0px

Card 3

radius 10px · padding 0px 0px

Card 4

radius 8px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#F2F1ED`	`none`	`10px`	`0px 0px`	`rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`
2	`#F7F7F4`	`1px solid rgba(39, 39, 29, 0.1)`	`8px`	`0px 0px`	`none`
3	`transparent`	`none`	`10px`	`0px 0px`	`rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px`
4	`transparent`	`none`	`8px`	`0px 0px`	`none`

Copy-paste code

Card 1

.card-cursor-1 {
  background:#F2F1ED;
  border:1px solid rgba(39, 39, 29, 0.1);
  border-radius:10px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;
}

Card 2

.card-cursor-2 {
  background:#F7F7F4;
  border:1px solid rgba(39, 39, 29, 0.1);
  border-radius:8px;
  padding:20px;
}

Card 3

.card-cursor-3 {
  background:transparent;
  border:1px solid rgba(39, 39, 29, 0.1);
  border-radius:10px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px;
}

Card 4

.card-cursor-4 {
  background:transparent;
  border:1px solid rgba(39, 39, 29, 0.1);
  border-radius:8px;
  padding:20px;
}

More Cursor

Cursor full token spec Cursor style guide Cursor Buttons Cursor Pricing Table Raycast vs Cursor Cursor vs Anthropic Cursor vs Notion

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Clerk 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 →