CSS3

Properties & Functions API Reference

Modern CSS properties (flexbox, grid, transforms) and built-in functions (calc, var, gradients).

By EZ4Code TeamLast updated: 2026-08-01

Properties

Layout and transform properties introduced in CSS3 for flexible box layout, grid layout, and 2D/3D transforms.

display: flex | inline-flex

Establishes a flex formatting context; children become flex items laid out along main/cross axes.

Returns: declaration

display: grid

Establishes a grid formatting context with rows and columns defined by grid-template-*.

Returns: declaration

grid-template-columns: <track-list>

Defines the columns of the grid; accepts lengths, fr units, repeat(), minmax(), and auto-fit/auto-fill.

Returns: declaration

transform: <transform-functions>

Applies 2D or 3D transformations: translate, rotate, scale, skew, matrix, and their 3D variants.

Returns: declaration

flex: <grow> <shrink> <basis>

Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item.

Returns: declaration

Built-in CSS value functions: calc for math, var for custom properties, and gradient generators.

calc(expression)

Performs arithmetic on mixed units (lengths, percentages, angles) with + - * / operators.

Returns: <length> | <percentage> | etc.

var(<custom-property-name>, <fallback>?)

Substitutes the value of a CSS custom property (variable), with an optional fallback if undefined.

Returns: <declaration-value>

linear-gradient(<angle|side>, <color-stop-list>)

Creates a linear gradient image along a specified direction with color stops.

Returns: <image>

radial-gradient(<shape> at <position>, <color-stop-list>)

Creates a radial gradient radiating from a center point.

Returns: <image>