taste-skill / Components / Loops Cards

Loops Card Component Styles

3 Loops card containers extracted from loops.so: backgrounds, 12px/8px/14px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Loops canvas

Card 1

radius 12px · padding 4px 4px

Card 2

radius 8px · padding 0px 0px

Card 3

radius 14px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#F1F0EF`	`1px solid rgba(38, 38, 26, 0.08)`	`12px`	`4px 4px`	`rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px`
2	`#F9F9F8`	`1px solid #E9E8E6`	`8px`	`0px 0px`	`none`
3	`#FDFDFC`	`1px solid #E9E8E6`	`14px`	`0px 0px`	`rgba(0, 0, 0, 0.024) 0px 1px 2px 0px, rgba(0, 0, 0, 0.055) 0px 18px 44px 0px, color(srgb 0.992157 0.992157 0.988235 / 0.9) 0px 1px 0px 0px inset`

Copy-paste code

Card 1

.card-loops-1 {
  background:#F1F0EF;
  border:1px solid rgba(38, 38, 26, 0.08);
  border-radius:12px;
  padding:4px 4px;
  box-shadow:rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px;
}

Card 2

.card-loops-2 {
  background:#F9F9F8;
  border:1px solid #E9E8E6;
  border-radius:8px;
  padding:20px;
}

Card 3

.card-loops-3 {
  background:#FDFDFC;
  border:1px solid #E9E8E6;
  border-radius:14px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.024) 0px 1px 2px 0px, rgba(0, 0, 0, 0.055) 0px 18px 44px 0px, color(srgb 0.992157 0.992157 0.988235 / 0.9) 0px 1px 0px 0px inset;
}

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

See taste-skill Pro →

Loops Card Component Styles

Rendered on the Loops canvas

Card specs

Copy-paste code

More Loops

Same component, other brands