Where are my colours and images worked on?

In your browser, on your device. Colours you type and images you open stay with you.

Does it work offline?

Yes. Once this page has loaded, it keeps working without an internet connection.

HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, the 148 CSS colour names, or just three numbers like 30 144 255.

Design soft, layered box shadows with a live preview and copy the CSS.

Presets

Layers

Horizontal offset0px

Vertical offset+1px

Blur2px

Spread0px

Shadow colour

Inset (inside the box)

Preview cardDrag the sliders to shape the shadow.

Background

Corner radius16px

box-shadow:
    0px 1px 2px 0px rgba(15, 23, 42, 0.06),
    0px 4px 8px -2px rgba(15, 23, 42, 0.08),
    0px 12px 24px -6px rgba(15, 23, 42, 0.1);

Tailwind class

shadow-[0px_1px_2px_0px_rgba(15,23,42,0.06),0px_4px_8px_-2px_rgba(15,23,42,0.08),0px_12px_24px_-6px_rgba(15,23,42,0.1)]

Where are my colours and images worked on?: In your browser, on your device. Colours you type and images you open stay with you.
Does it work offline?: Yes. Once this page has loaded, it keeps working without an internet connection.
Which colour formats can I use?: HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, the 148 CSS colour names, or just three numbers like 30 144 255.

Ready-made settings for common jobs.

More tools for working with colour.

Linear, radial, conic

HEX, RGB, HSL, OKLCH

Schemes and random

WCAG AA and AAA

50–950 scale