Loading…
Loading…
Layer soft, hard, inset and glowing box-shadows with a live preview, and copy the CSS.
Also covers: Shadow generator · CSS shadow generator
Layering two or three soft shadows (a tight one and a wide one) looks more natural than one big blur.
.card { box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08), 0 8px 24px -4px rgba(15, 23, 42, 0.16);}Soft, floating, hard, inset or glow.
Offset, blur, spread, colour, opacity, inset.
All layers in one box-shadow declaration.
Blur softens the edge; spread grows (or, negative, shrinks) the shadow before blurring. A negative spread with a large blur gives soft, realistic shadows.
Real shadows have a dark, tight core and a faint wide falloff. Two or three layers look more natural than one.
Large blurs on many elements that animate can. For animated shadows, animate the opacity of a pseudo-element instead.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.