Shadow
Preview
Layered depth
box-shadow: 0px 24px 60px -18px rgba(17, 24, 39, 0.18);
Shadow controls
Presets
CSS export
.surface {
box-shadow: 0px 24px 60px -18px rgba(17, 24, 39, 0.18);
}Overview
Create box-shadow values for cards, modals, and UI surfaces with offset, blur, spread, opacity, and inset controls.
Build soft or elevated shadows visually and export production-ready CSS.
Common workflows
- Generate shades, tints, and alternate color formats from one base color.
- Build palette harmonies and compare them in a UI preview before exporting values.
- Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.
FAQ
Does it support inset shadows?
Yes. You can switch between outer and inset shadows and preview them live.
Can I copy the final CSS?
Yes. The output includes a clean box-shadow declaration ready for use in stylesheets.