Build CSS box shadows visually and copy the generated code.
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.18);
Subtle card
A soft, close shadow
0 1px 3px rgba(0,0,0,0.12)Elevated
Larger blur for a lifted feel
0 12px 32px rgba(0,0,0,0.18)Inner shadow
Inset shadows sit inside the element
inset 0 2px 4px rgba(0,0,0,0.15)Horizontal and vertical offset move the shadow, blur softens it, and spread grows or shrinks it before blurring.
Add a second or third shadow to build realistic depth. Real objects rarely cast a single uniform shadow.
The generated declaration is ready to paste straight into a stylesheet or a component.
Seeing the shadow change as you drag is far faster than editing numbers and reloading a page.
Stacking several shadows is how convincing elevation is built, and doing it by hand in a text editor is tedious.
Inner shadows are useful for pressed buttons and input wells, and behave quite differently from outer ones.
Box shadow takes five values and a colour, and the relationship between them is far easier to understand by seeing than by reading. Adjust offset, blur, spread and colour with sliders and watch the result update on a live preview. Multiple shadows can be layered, which is how convincing depth is actually built — a tight, dark shadow close to the element plus a wide, soft one further out.
Keep going
Related pages in Developer Tools, plus what others are using right now.
More developer tools that pair well with this one.
Create linear and radial CSS gradients visually and copy the code.
Pick a colour and get HEX, RGB and HSL values with contrast checking.
Format and tidy CSS, SCSS and Less with consistent spacing and indentation.
Convert HEX colour codes to RGB and HSL, including alpha values.
Convert RGB and RGBA colour values into HEX codes.
Format, validate and minify JSON, with errors that point to the exact line.
Create strong random passwords with full control over length and characters.
Work out any percentage — of a number, as a share, or as a change.
Count words, characters, sentences and paragraphs as you type.
Convert between length, weight, temperature, volume, speed, data and more.
Count characters with and without spaces, against the limits that matter.
Find the mean, median, mode and range of a list of numbers, with the working shown.
Sample and population standard deviation and variance, both shown, with the working.
Turn a logo into favicon.ico, the PNG sizes a site needs, and the HTML to declare them.
Check a downloaded file against its published checksum, without uploading anything.
Stamp text like DRAFT or CONFIDENTIAL across a PDF, in your browser.
Escape text for HTML, or turn entities back into readable characters.
See how savings grow with compounding, including regular contributions.