The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric […]

.element { width: random(5rem, 25rem, by 5rem); }

The CSS rgb() color function represents color in the sRGB color space specifying their redness (r), greenness (g), and blueness (b), and an optional transparency value.

.element { color: rgb(0 0 0 / 0.5); }

The CSS round() function enables us to round a number, percentage, or dimension (i.e., a number with units attached). We’ve been able to round using […]

.element { width: round(10.4px, 1px); }

The CSS rem() function (also called the “remainder” function) returns the amount left over after the first argument’s integer is divided by the second argument.

.element { width: rem(10px, 4px); }

The radial-gradient() functions creates a circular or elliptical color gradient starting from a center point and spreading outward.

.element { background: radial-gradient(red, orange); }

The repeating-radial-gradient() function creates a circular or elliptical color gradient. The gradient is then repeated infinitely.

.element { background: repeating-radial-gradient(crimson, purple 50px, crimson 100px); }

The repeating-conic-gradient() function creates a repeating gradient by placing colors around a circle.

.element {
  background-image: repeating-conic-gradient(from 45deg in oklch, #231942, #be95c4 20deg, #231942 40deg);
}

The repeating-linear-gradient() function creates a repeating gradient that places colors along a straight line and smoothly transitions between them. We define a section of the gradient, which then gets repeated until it fills the available space.

.element { background-image: repeating-linear-gradient(tomato, slateblue, tomato 50%); }

The ray() function is used in combination with the offset-path property and creates a line segment, a ray. It lets you move or place an element using polar coordinates, i.e. coordinates based on a distance and an angle instead of Cartesian coordinates, where the X coordinate is on the horizontal axis and the Y coordinate is on the vertical axis.

.element { offset-path: ray(180deg farthest-side contain at 100px 200px); }