taste-skill / Components / Notion Cards

Notion Card Component Styles

4 Notion card containers extracted from notion.so: backgrounds, 8px/12px 12px 0px 0px/12px 0px 0px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Notion canvas

Card 1

radius 8px · padding 0px 0px

Card 2

radius 12px 12px 0px 0px · padding 0px 0px

Card 3

radius 12px 0px 0px · padding 0px 0px

Card 4

radius 12px · padding 24px 24px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`transparent`	`1px solid rgba(0, 0, 0, 0.1)`	`8px`	`0px 0px`	`rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px`
2	`transparent`	`none`	`12px 12px 0px 0px`	`0px 0px`	`rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
3	`transparent`	`none`	`12px 0px 0px`	`0px 0px`	`rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
4	`#FFFFFF`	`1px solid rgba(0, 0, 0, 0.1)`	`12px`	`24px 24px`	`none`

Copy-paste code

Card 1

.card-notion-1 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.1);
  border-radius:8px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px;
}

Card 2

.card-notion-2 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.1);
  border-radius:12px 12px 0px 0px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px;
}

Card 3

.card-notion-3 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.1);
  border-radius:12px 0px 0px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px;
}

Card 4

.card-notion-4 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 0, 0.1);
  border-radius:12px;
  padding:24px 24px;
}

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

See taste-skill Pro →

Notion Card Component Styles

Rendered on the Notion canvas

Card specs

Copy-paste code

More Notion

Same component, other brands