taste-skill / Components / Raycast Cards

Raycast Card Component Styles

8 Raycast card containers extracted from raycast.com: backgrounds, 19px/12px/11px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Raycast canvas

Card 1

radius 19px · padding 8px 8px

Card 2

radius 12px · padding 0px 0px

Card 3

radius 12px · padding 0px 0px

Card 4

radius 12px · padding 0px 0px

Card 5

radius 11px · padding 14.5px 15px

Card 6

radius 20px · padding 0px 0px

Card 7

radius 22px · padding 0px 0px

Card 8

radius 26px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`rgba(0, 0, 0, 0.44)`	`1px solid rgba(255, 255, 255, 0.08)`	`19px`	`8px 8px`	`rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
2	`#07080A`	`1px solid rgba(255, 255, 255, 0.08)`	`12px`	`0px 0px`	`rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset`
3	`rgba(0, 0, 0, 0.6)`	`1px solid rgba(140, 140, 145, 0.2)`	`12px`	`0px 0px`	`rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
4	`rgba(157, 186, 216, 0.1)`	`1px solid rgba(140, 140, 145, 0.2)`	`12px`	`0px 0px`	`rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`
5	`transparent`	`none`	`11px`	`14.5px 15px`	`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
6	`transparent`	`none`	`20px`	`0px 0px`	`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.05) 0px 0px 20px 3px, rgba(7, 13, 79, 0.05) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset`
7	`#111214`	`1px solid rgba(255, 255, 255, 0.06)`	`22px`	`0px 0px`	`none`
8	`transparent`	`none`	`26px`	`0px 0px`	`rgba(0, 0, 0, 0.2) 0px 16px 48px 8px, rgba(0, 0, 0, 0.75) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.4) 0px 4px 8px 0px, rgba(0, 0, 0, 0.8) 0px 12px 32px 0px`

Copy-paste code

Card 1

.card-raycast-1 {
  background:rgba(0, 0, 0, 0.44);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:19px;
  padding:8px 8px;
  box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;
  backdrop-filter:blur(2px);
}

Card 2

.card-raycast-2 {
  background:#07080A;
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset;
}

Card 3

.card-raycast-3 {
  background:rgba(0, 0, 0, 0.6);
  border:1px solid rgba(140, 140, 145, 0.2);
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;
  backdrop-filter:blur(36px);
}

Card 4

.card-raycast-4 {
  background:rgba(157, 186, 216, 0.1);
  border:1px solid rgba(140, 140, 145, 0.2);
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;
  backdrop-filter:blur(36px);
}

More Raycast

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

Same component, other brands

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