Utilko logo Utilko

Box Shadow Generator

Visually design CSS box shadows with controls for offset, blur, spread, color, and inset. Copy the box-shadow CSS property instantly.

Used 24.7K times today

Box Shadow Generator

box-shadow: 5px 5px 10px 0px #00000040;

How to Use Box Shadow Generator

  1. 1

    Adjust shadow parameters

    Use sliders to set horizontal offset, vertical offset, blur radius, and spread radius in pixels.

  2. 2

    Set color and opacity

    Pick the shadow color using the color picker and adjust opacity for subtle or dramatic effects. Enable inset for inner shadows.

  3. 3

    Copy the CSS

    Click "Copy CSS" to copy the complete box-shadow CSS property value for use in your stylesheet.

Frequently Asked Questions

What is the difference between blur and spread in box-shadow?
Blur radius controls how soft or sharp the shadow edge is — higher values create a softer shadow. Spread radius controls how much the shadow expands or contracts beyond the element's dimensions.
Can I layer multiple box shadows?
Yes. CSS supports comma-separated multiple box shadows on a single element. The generator allows you to add multiple shadow layers and stacks them in the correct CSS syntax.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating the appearance of a pressed or embossed effect. Toggle the "Inset" checkbox to switch between outer and inner shadow.

About Box Shadow Generator

The Box Shadow Generator on Utilko lets you craft the perfect CSS box shadow interactively with sliders, color pickers, and a live preview. Box shadows add depth, hierarchy, and polish to UI elements — cards, buttons, modals, and containers all benefit from well-designed shadows.

The generator supports multiple layered shadows, inset shadows, and full color control including opacity. Copy the clean CSS output directly into your project without memorising the box-shadow property syntax.

More SEO & Web Tools Tools

Meta Tag Generator

Generate complete HTML meta tags for SEO including title, description, robots, viewport, and canonical tags. Preview how your page appears in search results.

Open Graph Generator

Generate Open Graph and Twitter Card meta tags for rich social media previews. Preview how your link looks when shared on Facebook, Twitter, and LinkedIn.

Robots.txt Generator

Generate a valid robots.txt file for your website. Control which pages search engine crawlers can access and set your XML sitemap location.

Sitemap Generator

Generate a valid XML sitemap for your website. Enter your URLs, set priority and change frequency, and download a standards-compliant sitemap.xml.

Schema Markup Generator

Generate JSON-LD structured data markup for articles, products, FAQs, breadcrumbs, and more. Boost rich snippets in Google search results.

Google Fonts Previewer

Preview any Google Font with your own custom text. Browse font weights, styles, and sizes, then copy the embed code for your website.

CSS Gradient Generator

Create beautiful CSS linear, radial, and conic gradients with a visual editor. Copy the CSS gradient code for direct use in your stylesheet.

Border Radius Generator

Visually design CSS border-radius values for rounded corners and complex shapes. Get the exact CSS code for any corner radius combination.