surface

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.

Sizing a nested shape's corners so its curve shares a centre with the one outside it, the inner radius being the outer radius less the padding between them.

How far a shape's corners are rounded off, measured as the radius of the circle that replaces the square angle, and the one number that decides how soft a UI reads.

A faint repeating field of dots or ruled squares behind content, borrowed from graph paper and canvas tools to suggest an editable surface rather than a page.

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.

An outline filled with a gradient rather than a single color, usually built from a conic or linear gradient behind a masked shape so the hue travels around the edge.

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.

Rendering tone as a grid of dots that vary in size, borrowed from print and used to give flat interface art a comic or newsprint feel.

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 soft irregular shape with no straight edges, used as a background accent or image mask to soften a strictly rectangular layout.

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.

Thin repeating dark lines laid over an interface to imitate the raster of a cathode ray tube screen, often with a slight curve and flicker.

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

A rounded square whose corners curve continuously into the sides instead of meeting a circular arc, the shape behind iOS app icons.

A background pattern of small irregular chips scattered on a plain field, copied from poured stone flooring and used flat and multicolored behind interface content.

A gradual darkening toward the edges of an image that pulls the eye to the centre, borrowed from lens falloff and applied deliberately for focus and mood.