CSS3 Properties & Functions API Reference

`Properties`

5 methods

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

Example

css3

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

display: grid

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

Returns

declaration

Example

css3

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

grid-template-columns: <track-list>

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

Parameters

Name	Type	Description
track-list	string	e.g. 'repeat(3, 1fr)' or '100px 1fr 2fr'.

Returns

declaration

Example

css3

.gallery {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

transform: <transform-functions>

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

Parameters

Name	Type	Description
transform-functions	string	e.g. 'translateX(10px) rotate(45deg)'.

Returns

declaration

Example

css3

.card {
  transform: translateY(-4px) rotate(2deg);
  transition: transform .2s ease;
}

flex: <grow> <shrink> <basis>

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

Parameters

Name	Type	Description
grow	number	Grow factor.
shrink	number	Shrink factor.
basis	length \| auto	Initial main size.

Returns

declaration

Example

css3

.main { flex: 1 1 auto; }
.sidebar { flex: 0 0 200px; }

`Functions`

4 methods

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.

Parameters

Name	Type	Description
expression	string	e.g. '100% - 80px' (spaces required around + and -).

Returns

<length> | <percentage> | etc.

Example

css3

.box {
  width: calc(100% - 2 * 16px);
  font-size: calc(1rem + 0.5vw);
}

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

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

Parameters

Name	Type	Description
custom-property-name	<custom-property-name>	e.g. '--main-color'.
fallback	<declaration-value>	Optional value used if the property is not set.

Returns

<declaration-value>

Example

css3

:root { --main: #3498db; }
.btn {
  background: var(--main, #000);
}

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

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

Parameters

Name	Type	Description
angle\|side	string	e.g. 'to right' or '45deg'.
color-stop-list	string	e.g. 'red, blue' or 'red 0%, blue 100%'.

Returns

<image>

Example

css3

.banner {
  background: linear-gradient(45deg, #ff8a00, #e52e71);
}

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

Creates a radial gradient radiating from a center point.

Parameters

Name	Type	Description
shape	string	e.g. 'circle' or 'ellipse'.
position	string	e.g. 'center' or '50% 50%'.
color-stop-list	string	e.g. 'white, black'.

Returns

<image>

Example

css3

.halo {
  background: radial-gradient(circle at center, #fff, #000);
}

All references