CSS Box Shadow Generator

What does the CSS Box Shadow Generator do?

The CSS Box Shadow Generator creates elevation drop shadows and inner inset shadows for modern UI components. It features an interactive visual canvas preview, precision sliders for Horizontal (X), Vertical (Y), Blur, Spread, Opacity, and Color, preset elevation levels (Tailwind sm, md, lg, xl, 2xl, inner, and glow), and instant copyable CSS and Tailwind utility code.

Core Concepts

Understanding CSS box-shadow physics:

• Horizontal (X) & Vertical (Y) Offset: Determines the light source angle and distance between the element and background plane.
• Blur Radius: Simulates atmospheric light diffusion. Higher values soften shadow edges.
• Spread Radius: Expands or contracts the shadow footprint before blur is applied. Negative spread creates tight, realistic contact shadows.
• Multi-Layer Stacking: Modern design systems layer two or more shadows (ambient occlusion + directional key light) to eliminate artificial dark rings.
• Inset Shadows: Places the shadow inside the container frame to create debossed and recessed card interfaces.

How to use the tool?

1. Select a Preset or Adjust Sliders: Choose an elevation preset (sm, md, lg, xl) or fine-tune individual X, Y, Blur, Spread, and Opacity controls.
2. Inspect Visual Elevation: View real-time depth physics directly on the interactive canvas box.
3. Copy Code: Click Copy to grab standard CSS box-shadow rules or Tailwind utility classes.

Related Developer Utilities

If you work with CSS design tokens, web styling, and UI components, explore these complementary tools:

• HEX to RGB & HSL Converter: Convert hexadecimal color codes into RGB, HSL, and CMYK formats.
• RGB & RGBA to HEX Converter: Convert CSS rgb() and rgba() strings into 6-digit and 8-digit HEX codes.
• CSS Unit Converter: Convert between PX, REM, EM, VW, VH, and percentage units.
• CSS Minifier: Minify and compress CSS stylesheets to reduce bandwidth and load times.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/box-shadow-generator) to programmatically generate normalized CSS box-shadow declarations, multi-layer elevations, and Tailwind classes for design token pipelines.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/box-shadow-generator \
  -H "Content-Type: application/json" \
  -d '{
    "rawText": "md"
  }'

Python

import requests

url = "https://blueutils.com/api/css/box-shadow-generator"
payload = {"rawText": "md"}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "rawText": "md"
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/box-shadow-generator"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "totalLayers": 2,
  "layers": [
    {
      "x": 0,
      "y": 4,
      "blur": 6,
      "spread": -1,
      "color": "rgba(0, 0, 0, 0.1)",
      "inset": false
    },
    {
      "x": 0,
      "y": 2,
      "blur": 4,
      "spread": -2,
      "color": "rgba(0, 0, 0, 0.1)",
      "inset": false
    }
  ],
  "cssValue": "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)",
  "cssDeclaration": "box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);",
  "fullRule": "-webkit-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1)...;\nbox-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1)...;",
  "tailwind": "shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.1)]"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid shadow configuration: must provide preset string or layer array."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to generate Box Shadows?

Integrating the Box Shadow API into design token build pipelines, headless component generators, or AI agents provides key benefits:

• Automated Design Token Pipelines: Compiles elevation presets (1..5) into normalized multi-layer CSS declarations, Figma token JSON, and Android elevation objects during CI/CD.
• AI Agent Styling & UI Generation: Enables AI frontend agents to generate photorealistic, smooth multi-stop box shadows rather than harsh single-layer CSS rules.
• Consistent Cross-Platform Elevation: Ensures card, modal, and drawer shadow physics match across Web, React Native, iOS, and Android clients.

Native Usage

How to generate multi-layer elevation box shadows programmatically across environments:

Node.js (JavaScript)

// Calculate multi-layer elevation box shadow in Node.js
function createBoxShadow(layers) {
  const shadow = layers.map(l => `${l.inset ? 'inset ' : ''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${l.color}`).join(', ');
  return `box-shadow: ${shadow};`;
}

const elevationMd = [
  { x: 0, y: 4, blur: 6, spread: -1, color: 'rgba(0, 0, 0, 0.1)', inset: false },
  { x: 0, y: 2, blur: 4, spread: -2, color: 'rgba(0, 0, 0, 0.1)', inset: false }
];

console.log(createBoxShadow(elevationMd));

Windows (PowerShell Script)

# Programmatically format multi-layer elevation shadow
$layers = @(
    @{ x = 0; y = 4; blur = 6; spread = -1; color = "rgba(0, 0, 0, 0.1)" },
    @{ x = 0; y = 2; blur = 4; spread = -2; color = "rgba(0, 0, 0, 0.1)" }
)
$parts = $layers | ForEach-Object { "$($_.x)px $($_.y)px $($_.blur)px $($_.spread)px $($_.color)" }
$shadowCss = "box-shadow: " + ($parts -join ', ') + ";"
Write-Host $shadowCss

Python

def create_box_shadow(layers):
    parts = [f"{'inset ' if l.get('inset') else ''}{l['x']}px {l['y']}px {l['blur']}px {l['spread']}px {l['color']}" for l in layers]
    return f"box-shadow: {', '.join(parts)};"

layers = [
    {"x": 0, "y": 4, "blur": 6, "spread": -1, "color": "rgba(0,0,0,0.1)"},
    {"x": 0, "y": 2, "blur": 4, "spread": -2, "color": "rgba(0,0,0,0.1)"}
]
print(create_box_shadow(layers))

Java

import java.util.List;
import java.util.stream.Collectors;

public class BoxShadowGenerator {
    record ShadowLayer(int x, int y, int blur, int spread, String color, boolean inset) {}

    public static String createBoxShadow(List<ShadowLayer> layers) {
        String shadow = layers.stream()
            .map(l -> (l.inset() ? "inset " : "") + l.x() + "px " + l.y() + "px " + l.blur() + "px " + l.spread() + "px " + l.color())
            .collect(Collectors.joining(", "));
        return "box-shadow: " + shadow + ";";
    }

    public static void main(String[] args) {
        List<ShadowLayer> layers = List.of(
            new ShadowLayer(0, 4, 6, -1, "rgba(0, 0, 0, 0.1)", false),
            new ShadowLayer(0, 2, 4, -2, "rgba(0, 0, 0, 0.1)", false)
        );
        System.out.println(createBoxShadow(layers));
    }
}