Goodfolk Design Utilities

Box Shadow Generator

Create CSS box shadows, preview them, and copy ready-to-use shadow styles.

X offset (px)Y offset (px)Blur radius (px)Spread radius (px)Shadow color

Opacity (%)

Softer shadows usually use higher blur, lower opacity, and a small negative spread.

Shadow preview

Preview card

CSS

box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.35);

Box shadow value

0px 12px 30px -10px rgba(0, 0, 0, 0.35)

Related tools

Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.

Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.

Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.