CSS Shorthand Expander

How to use

1. 1Paste a CSS shorthand declaration into the box, for example border: 2px solid #3b82f6; or font: italic bold 16px/1.5 Georgia, serif.
2. 2The property is detected from the part before the colon. If you paste only a value, or want to force a reading, pick the property from the buttons.
3. 3Read the longhand list: each row shows the property, the value the shorthand assigns it, and a short note on what it does.
4. 4Watch for the initial tag, which marks a longhand the shorthand quietly resets to its default because you gave it no value.
5. 5Check the amber note when present, for example for multi-layer backgrounds or comma-separated transitions, which explains how the values were split.
6. 6Copy a single longhand line with its Copy button, or Copy all to grab the full longhand block. Everything runs locally in your browser.

About this tool

CSS Shorthand Expander takes a single shorthand declaration and rewrites it as the full list of longhand properties it actually sets, with a one-line note on what each longhand controls. CSS shorthands are convenient but they hide two things that regularly cause bugs, and this tool surfaces both. The first is that a shorthand resets every longhand property in its group, including the ones you never mentioned, back to that property's initial value. Writing background: red does not only set the color; it also resets background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment to their defaults, which is exactly how a later background: shorthand silently wipes out a gradient or position you set earlier. The expander makes those resets visible by filling in the initial value for any longhand your shorthand leaves out and tagging it as initial, so you can see what the one line really does. The second is that value order is positional and subtle. The font shorthand needs the optional style, variant, weight, and stretch before a required size, an optional line-height after the size behind a slash, and a required family at the end, and getting the order wrong makes the whole declaration invalid. The background shorthand puts size after position behind a slash and only lets the final comma-separated layer set the color. The flex shorthand turns a lone number like flex: 1 into flex-grow: 1, flex-shrink: 1, and flex-basis: 0, which surprises people who expect the basis to stay auto. The tool parses each of these correctly, respecting parentheses so calc(), rgb(0 0 0 / 50%), var(), and gradient functions stay intact, and respecting quotes so a font family name with a space survives. It expands the shorthands developers most often need to read or debug: font, background (including multiple layers), border and the four per-side borders, border-radius with its top-left, top-right, bottom-right, bottom-left order and the optional slash for elliptical corners, border-width, border-style, border-color, outline, margin, padding, inset, flex, gap, place-items, place-content, place-self, transition, animation, list-style, text-decoration, columns, overflow, and grid-template. Paste a complete declaration written as property: value and the property is detected automatically, or drop in just the value and pick the property from the list. Your units, colors, keywords, and functions are preserved exactly as written; the tool only rearranges and labels them, it never reformats your values. This is the natural companion to the margin and padding shorthand generator and to a CSS formatter: where those compose or tidy a rule, this one reads a rule back so you can understand, audit, or fix it. It is a syntax and structure aid, not a full CSS validator, so an unusual value that a browser would still accept may be passed through or flagged as unrecognised rather than rejected. Everything is computed in your browser, and the CSS you paste is never uploaded, logged, or sent anywhere.

Free to use. Works in your browser. No signup, no login.