depth

A self contained depth ordering created by certain properties, inside which z-index only competes locally and can never escape to the level above.

The layer above everything else in a document where fullscreen elements, modal dialogs and popovers render, escaping every ancestor's clipping and stacking order.

A 2020s rave revival style of chrome and liquid 3D objects, warped and stretched lettering, clashing saturated colour on near black, smileys, globes, and wireframe motifs.

Apple's early Mac OS X look of glossy blue gel buttons, pinstripes, gumdrop window controls, and a pulsing default button.

A style whose background is built from heavily blurred color blobs that glow and drift like the northern lights behind the content.

A soft style where controls look inflated from clay: pastel fills, very large corner radii, an inner highlight, and a tinted drop shadow.

Flat design with the depth cues put back in small doses: soft shadow, subtle gradient, and hover feedback that show what can actually be clicked.

A style that strips away depth cues, using solid fills, sharp edges, and bold color instead of shadow, gradient, bevel, or texture.

The mid 2000s look of glossy gradients, bubbles, water, bright skies, and clean humanist type, named after the typeface and Windows Aero.

A style where surfaces are translucent and blur what is behind them, separated from the backdrop by a hairline edge and a soft shadow.

Rendered objects pushed past photographic realism, with physically based materials, sharp specular detail, and studio lighting, floated over an otherwise plain interface.

Art drawn on a fixed axonometric grid so depth reads without perspective, with parallel edges and no vanishing point.

Apple's 2025 material where controls float as a translucent layer that refracts what is behind them and reshapes fluidly as content moves underneath.

A 3D style that keeps the polygon count low enough to see, so surfaces read as faceted triangles under flat shading instead of smooth curves.

Fluent's opaque app background material, subtly tinted with the user's desktop wallpaper colour and going neutral when the window loses focus.

The current return of depth and material to interfaces, using restrained texture, shadow, and highlight instead of literal leather, metal, and felt.

A loud style built from thick black outlines, saturated flat color, square corners, and hard offset shadows with zero blur.

A style where controls look extruded from or pressed into one background colour, shaped only by soft light and shadow.

A style that makes interface elements imitate real objects and materials, using leather, metal, paper, and glossy highlights so their purpose reads as familiar.

Interface designed to sit in three dimensional space, where panels are made of a system glass material and hierarchy is carried by depth rather than by colour.

The Windows Vista and 7 look built on translucent glass window frames, soft outer glows, reflections, and animated window transitions.

Rotating a camera around a fixed point by dragging, so the scene appears to turn while the subject stays centred.

Rotating a card in perspective toward the pointer so it appears to tip in three dimensions, often with a moving highlight to sell the depth.

Rotating a card about its own axis to show a second face on the back, with the hidden face pre-rotated and its backface hidden so only one side is ever visible.

Material's transition in which a container grows or shrinks into another one, its contents crossfading inside, so a card visibly becomes the screen it opened.

A style where controls behave like soft matter, squashing under a press and springing back past rest, so the surface reads as jelly, clay, or inflated plastic rather than paint.

Giving interface objects a believable place in depth by folding, layering or flipping them, so a reader can tell where something went and where it will come back from.

Scaling each item in a row by how close the pointer is to it, so the item under the cursor swells, its neighbours ramp down, and the row reads as bulging.

Borrowing the camera's vocabulary: dolly moves the viewer through the scene, zoom scales the scene itself, and the interface reads as travelling rather than rearranging.

A card or button that rises a few pixels and deepens its shadow while the pointer is over it, so the whole surface reads as lifted toward the reader.

Moving layers at different rates against the same input, so the slower layers read as farther away and the scene gains depth.

The transparency component carried inside a colour value itself, which lets a border or fill blend with whatever surface it lands on instead of assuming one.

The arithmetic that combines a translucent layer with what is beneath it, and the reason two stacked 50 percent layers do not add up to fully opaque.

A formula for combining a layer's colour with the colour behind it, such as multiply or screen or overlay, instead of simply covering it.

The older dark theme technique of laying white over a surface at an opacity that rises with elevation, because shadows are nearly invisible on dark backgrounds.

A soft multi-point blend built from colours placed on a grid and smoothed between them, giving the blurred, cloudlike backgrounds a linear gradient cannot.

How much of what is behind an element shows through it, applied to the whole element and its children at once rather than to a single colour value.

A translucent or gradient layer laid over imagery or behind a dialog, dimming what is beneath so text on top clears contrast or so focus moves forward.

A translucent sheet of the content colour laid over a control at a fixed opacity per state, so hover, focus and pressed are one rule instead of three palettes.

The colour of a plane that content sits on, defined as a set of stacked levels so a card on a page and a sheet on a card are told apart by value.

A wash of the primary colour blended into a surface in proportion to its elevation, so height reads as a colour shift rather than only as a shadow.

Apple's treatment where foreground colour is derived from the blurred content behind a material, so labels on a translucent panel shift with whatever they sit over.

Light and dark edges drawn along a shape's border so it reads as raised or carved, the depth trick behind classic desktop buttons.

A corner cut flat at an angle instead of rounded, the sharp-edged sibling of border-radius that reads industrial, military, or sci-fi.

How high a surface sits above the one behind it, expressed as a shadow, a tint, or both, and held to a few named steps so that height means something.

A wet plastic finish made from a light gradient across the top half of a control, a highlight arc, and a darker lower half.

A gradient with a fine noise layer over it, added to hide banding and give a flat background the texture of printed paper or film.

A finish that shifts hue with viewing angle, imitating foil, soap film, or a CD surface with banded rainbow gradients over a pale metallic ground.

A text effect that fakes stamping into the surface, using a one pixel light shadow below the glyphs and a slightly darker fill above it.

A flat era decoration where an icon casts a single hard shadow at 45 degrees that runs far past the shape before fading out.

A saturated colour surrounded by layered soft shadows of the same hue, so type or a border reads as a lit tube against a dark surface.

A blur whose strength ramps across a region instead of applying evenly, so content fades into softness toward an edge rather than stopping at a hard line.

The bright reflection drawn on a surface to say it is glossy, placed where a light source would strike a curved object.

A user preference asking for opaque surfaces instead of blur and translucency, honoured by swapping frosted layers for solid fills.