Card Styling, Radius & Shadows
Customize the fills, outlines, accent badges, corner rounding presets, and elevation dropshadows across all Bento cards.
Click Appearance → Block to control the visual theme of every Bento card across your page.
1. Card Color Palette Controls
Card Fill (`elementColor`)
Controls the background color or semi-transparent RGBA fill of your Bento cards.
Card Text (`elementTextColor`)
Controls headings, titles, and body descriptions inside cards.
Border / Stroke (`elementStrokeColor`)
Sets the subtle 1px border outline around cards.
Accent Fill (`elementSecondaryColor`)
Tints badges, pill chips, and secondary interactive elements.
2. Corner Radius Presets
Click any of the 6 presets to adjust corner curvature site-wide:
| Preset Label | Radius Value | Visual Aesthetic |
|---|---|---|
| None | 0px |
Sharp corners / Brutalist editorial |
| XS | 4px |
Subtle modern tech rounding |
| S | 8px |
Clean classic UI |
| MD | 12px |
Balanced modern card |
| L | 16px |
Apple iOS standard curvature |
| XL | 24px |
Extra soft Bento aesthetic |
3. Card Dropshadows & Glows
Pro Feature- Enable Shadows: Toggle elevation depth dropshadows across all Bento cards.
- Shadow Color Picker: Customize shadow hue (e.g. subtle dark shadow
rgba(0,0,0,0.08)or colorful neon ambient glow).