Visualizing CSS

Multi-layer shadows, gradient stops, cubic-bezier timing curves, flex axes, grid tracks: all the parts of CSS that are hard to read as raw values, broken down into pictures.

Box shadow

Modern shadow styles often layer three, four, or five shadows together. Reading that as a comma-separated string is painful. The Box Shadow inspector parses the value, splits each shadow layer apart, and renders an exploded stack diagonally below the element so every layer’s offset, blur, spread, and color is readable at a glance.

Multi-layer shadows are exploded into a diagonal stack so each layer's contribution is separable.

Hover any layer in the exploded stack to see that single shadow rendered on the element in isolation, with its offset, blur, spread, and color surfaced alongside.

Hovering a layer surfaces its individual offset, blur, spread, and color values.

Gradients

CSS gradients are dense one-liners that pack a type, an angle, and an arbitrary number of color stops into a single function call. The gradient inspector parses each gradient on the selected element and breaks it into something you can actually read.

It handles all three types: linear-gradient, radial-gradient, and conic-gradient, plus repeating variants. Modern color spaces (oklch(), oklab(), lch(), lab(), hwb(), color()) are parsed correctly, and implicit stop positions are auto-filled via linear interpolation.

Each gradient renders as a horizontal color-stop bar, and hovering any stop reveals its value and position.

Animations

The animation inspector reads every CSS animation applied to the selected element and breaks it into its parts. Animation name, duration, delay, iteration count, and timing function are all listed. The timing function is rendered as a cubic-bezier curve so you can see the easing visually rather than parsing four numbers in your head.

Timing curves render as actual cubic-bezier paths, with any defined keyframes listed beneath them.

The parser handles every standard timing-function form: named keywords (linear, ease, ease-in, ease-out, ease-in-out) using their W3C-spec control points, custom cubic-bezier(x1, y1, x2, y2) values, and stair-step steps(n, start|end) functions which render as actual stair-step paths. If @keyframes rules are defined in an accessible stylesheet, they appear separately as syntax-highlighted CSS.

Transitions

The transition inspector reads transition-property, transition-duration, transition-delay, and transition-timing-function from computed styles. Properties that share the same timing curve, duration, and delay are grouped together, so a typical declaration like transition: opacity 200ms ease, transform 200ms ease shows as one curve covering both properties.

Each unique timing combination overlays as a color-coded cubic-bezier curve, so differences between transitions are visible at a glance.

This makes it easy to spot “why does this hover feel weird?” or audit that a component’s transitions all use the same easing.

Flex & grid layout

Flexbox and CSS Grid are powerful but the property names are notoriously hard to keep straight. The layout inspector reads the computed layout properties on the selected element and renders them as a labelled diagram: outer container, tracked items, axis direction arrows, alignment indicators, and gap.

Flex containers show the main and cross axis with arrows pointing in the actual direction of flow.

For Grid containers, it parses grid-template-columns and grid-template-rows, draws the column/row tracks at the right scale, and labels alignment on both axes.

Grid containers show the track structure, item count, and alignment as a diagram.

Below the diagram, the relevant layout CSS is listed in a copy-able block with browser defaults filtered out so you only see the properties that are doing real work.