CSS Box Shadow Parser

Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.

Description

Box shadows combine offsets, optional blur/spread, color and inset mode.

Box shadows combine offsets, optional blur/spread, color and inset mode. Literal parsing helps inspect a declaration without rendering it.^[1]

Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.

When to use CSS Box Shadow Parser

Use this tool to parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.

Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.

How to use CSS Box Shadow Parser and understand its results

Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
Enter value using the field table and calculation rules, then run the tool.
Read shadows. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
value	Box-shadow CSS value.	string; maximum length: 1000000	Required

Paste the property value; none returns an empty list. Split top-level comma shadows and whitespace tokens. Require two to four literal lengths, units except for zero, at most one inset and one color token; negative blur fails. Return original length/color tokens with defaults.^[2]

defaults: blur=0, spread=0, color=currentcolor

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
shadows	Parsed shadows in source order.	list of object; minimum entries: 0; maximum entries: 100000
shadows[].inset	Field in shadows record	boolean
shadows[].offsetX	Field in shadows record	string; maximum length: 1000000
shadows[].offsetY	Field in shadows record	string; maximum length: 1000000
shadows[].blur	Field in shadows record	string; maximum length: 1000000
shadows[].spread	Field in shadows record	string; maximum length: 1000000
shadows[].color	Field in shadows record	string; maximum length: 1000000

json

{
  "input": {
    "value": "inset 2px 3px 4px -1px rgb(0 0 0 / .5), 0 1px blue"
  },
  "output": {
    "shadows": [
      {
        "inset": true,
        "offsetX": "2px",
        "offsetY": "3px",
        "blur": "4px",
        "spread": "-1px",
        "color": "rgb(0 0 0 / .5)"
      },
      {
        "inset": false,
        "offsetX": "0",
        "offsetY": "1px",
        "blur": "0",
        "spread": "0",
        "color": "blue"
      }
    ]
  }
}

Limitations and assumptions

calc lengths are rejected. Color tokens are not validated and modern dynamic expressions are not resolved; no browser rendering or full CSS-property validation is performed.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use CSS Color Function Parser: Parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions. For a complementary task, use CSS Media Query Extractor: Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.

References

CSS Box Shadow Parser — tool.io
CSS Custom Property Parser — tool.io

Similar or alternative tools

CSS Color Function Parser
Parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions.
CSS Media Query Extractor
Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.