Skip to content
Tools
中文

LOCAL · FREE · NO SIGN-UP

Box Shadow Generator

Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.

Preview

Button

Shadow layers

Presets

Material elevation

Styles

CSS







Tailwind arbitrary value












How to use the box-shadow generator
  1. Pick a preset or start from the default layer, then drag offset, blur, spread and opacity until it looks right.
  2. Click Add layer to stack shadows — real depth usually needs two or three layers with different blurs.
  3. Change the preview shape and background to check the shadow on the colour you will actually use, then copy the CSS.
FAQ
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A small negative spread with a large blur gives the soft, tight shadow used in most modern UI kits.
How do I make an inner shadow?
Tick inset on a layer. Inset shadows are drawn inside the border box, which is how pressed buttons, input wells and neumorphic dents are made.
Why use several layers instead of one?
Real light produces both a tight contact shadow and a wide ambient one. Stacking a short, dark, low-blur layer under a long, faint, high-blur layer looks far more natural than a single shadow.










CSS Gradient GeneratorHOT
Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.




CSS Filter Generator
Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.




CSS Animation Generator
Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.




Border Radius Generator
Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.




Color PickerHOT
Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.




Color Converter
Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.




CSS Grid Generator
Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.




Flexbox Playground
Try every flex container and item property on a live preview, then copy the CSS and HTML.





All tools →