Free tool

Box Shadow Generator

Design CSS box shadows visually. Adjust offset, blur, spread, and color. Layer multiple shadows, try presets, and copy the CSS code.

Shadow Layers
Inset
Generated CSS
box-shadow: 5px 5px 10px 0px #00000040;

Preset Shadows

What Is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element. Shadows can be placed outside the element to create depth and elevation, or inside (using the inset keyword) to create pressed or embossed effects. Multiple shadows can be combined in a single declaration for layered, realistic results.

Box shadows are one of the most widely used CSS properties for creating visual hierarchy. Cards, buttons, modals, dropdowns, and navigation bars all benefit from well-crafted shadows that guide the user's eye and communicate depth.

Box Shadow Syntax Explained

The box-shadow property accepts the following values in order:

box-shadow: [inset] <x-offset> <y-offset> <blur> <spread> <color>;

  • X-offset: Horizontal displacement. Positive values push the shadow right; negative values push it left.
  • Y-offset: Vertical displacement. Positive values push the shadow down; negative values push it up.
  • Blur radius: How much the shadow is blurred. A value of 0 creates a sharp shadow. Larger values create softer, more diffused shadows.
  • Spread radius: Expands or contracts the shadow. Positive values make the shadow larger; negative values make it smaller than the element.
  • Color: The shadow color, typically a semi-transparent black (e.g., rgba(0, 0, 0, 0.15)). Using transparency allows the background to show through for a natural look.
  • Inset: Optional keyword that places the shadow inside the element instead of outside.

Creative Box Shadow Techniques

  1. 1. Layer multiple shadows for realism. Instead of one heavy shadow, use 2 to 3 subtle shadows at different distances. This mimics how light behaves in the real world and creates a more polished look.
  2. 2. Use colored shadows for branding. Replace generic black shadows with tinted versions of your brand color at low opacity. A blue card with a subtle blue shadow feels more cohesive than one with a gray shadow.
  3. 3. Animate shadows on hover. Increase the blur and vertical offset on hover to create a lifting effect. Use CSS transitions for smooth animation. Keep the transition duration short (150 to 200ms) for responsiveness.
  4. 4. Combine inset and outset shadows. Adding both an inner and outer shadow to elements like buttons creates a 3D, tactile feel that encourages interaction.

Frequently Asked Questions

More Free Tools

QR code generator

Generate custom QR codes for URLs, text, emails, phone numbers, and WiFi networks.

vCard generator

Create professional digital contact cards (VCF files) to easily share your contact information.

Bio generator

Generate the perfect social media bio for any platform with AI. Free, instant, no signup.

CSS gradient generator

Build beautiful CSS gradients with a visual editor. Linear, radial, and conic with live preview.

Meta description checker

Check meta title and description length with a live Google SERP preview.

Favicon generator

Upload an image and generate favicons in all standard sizes. Free, instant, no signup.

Twitter/X Card Validator

Preview how your content will look when shared on Twitter/X. Validate meta tags instantly.

Slug generator

Convert any text into clean, SEO-friendly URL slugs. Supports bulk conversion and options.

JSON formatter

Format, validate, and minify JSON with syntax highlighting and tree view.

Base64 encoder/decoder

Encode text to Base64 or decode Base64 to text with full UTF-8 support.

Link-in-bio checklist

Interactive 20-item checklist to optimize your link-in-bio page with progress tracking.

Business name generator

Generate unique, brandable business name ideas from your keywords and style preferences.

CTA generator

Generate high-converting call-to-action button text and supporting microcopy.

Headline analyzer

Score your headlines 0 to 100 and get tips to improve click-through rates.

Invoice generator

Create professional invoices for free. Add line items, tax, and notes, then print or save as PDF.

Testimonial formatter

Format customer testimonials into professional cards. 4 styles, copy as HTML or plain text.

Pricing table generator

Build responsive pricing tables for your website. 3 styles, feature lists, and CTA buttons.

Instagram Bio Generator

Generate Instagram bios optimized for 150 characters

TikTok Bio Generator

Generate TikTok bios optimized for 80 characters

Twitter/X Bio Generator

Generate Twitter/X bios optimized for 160 characters

LinkedIn Bio Generator

Generate LinkedIn bios optimized for 220 characters

Facebook Bio Generator

Generate Facebook bios optimized for 101 characters

Threads Bio Generator

Generate Threads bios optimized for 150 characters

Ready to stand out?

Create your page now. Ready in minutes.

Create your page
Free to try, no credit card required

Trusted by individuals and businesses worldwide