Free tool · copy-ready CSS
Box Shadow Generator
Design soft, realistic shadows for cards, buttons and images, then copy one line of CSS.
CSS
Presets
Want a site with this level of polish?
Get a modern design built with care.
Shadows, spacing and type are what make a site feel premium. I design and build websites that look sharp and load fast.
Tips for better shadows
- Keep them subtle: 5 to 15% opacity is enough for most cards.
- Light comes from above, so shadows should mostly fall downwards (positive Y).
- Tint your shadows with a dark version of your brand colour instead of pure black for a richer look.
- Bigger shadow = higher element: use larger shadows for things that float above the page, like menus and dialogs.
Frequently asked questions
What are layered shadows?
Several soft shadows stacked together. Real light creates shadows that fade gradually, so layering 3 to 5 small shadows looks far more natural than one big blurry one.
What do blur and spread do?
Blur softens the shadow's edge. Spread grows (positive) or shrinks (negative) the shadow before blurring; a negative spread with a large Y offset gives the popular "floating" look.
Do box shadows slow down a website?
Not noticeably for normal use. Very large blurs on many elements that animate can affect scrolling on slow phones, so keep animated shadows simple.
How do I add the shadow in WordPress or Elementor?
Paste the CSS into Appearance, Customize, Additional CSS for a class you give the element. In Elementor, add it under Advanced, Custom CSS, or use the Box Shadow control with the same values.
More design tools
Color Palette & Contrast Checker
Build colour palettes from one colour or a photo, and check text contrast against WCAG.
Social Share Image Maker
Design 1200×630 share images for Facebook, LinkedIn and X, plus Instagram sizes.
Image Cropper
Crop, rotate and flip images to any shape, with presets for social media.
CSS Gradient Generator
Create linear, radial and conic gradients visually and copy the CSS.
Blob & Shape Generator
Make organic blobs, stars, rounded polygons and flowers. Download SVG or PNG, or copy the CSS.
Section Divider Generator
Create wave, curve, slant and zigzag dividers between website sections, with copy-ready code.
CSS Clip-path Generator
Cut images and boxes into any shape by dragging points, with presets and copy-ready CSS.
CSS Button Generator
Design buttons with colours, gradients, borders and hover effects. Copy the HTML and CSS.
SVG Optimizer
Shrink SVG files from Illustrator, Figma or Inkscape, with a before and after preview.
Favicon from Text or Emoji
Make a favicon from your initials or an emoji, with ICO, SVG and PNG files.
Logo Badge & Seal Maker
Design round, shield, hexagon and seal badges with your text. Download PNG or SVG.