CSS Functions

最終更新：2026-09-13

CSS functions compute values at used-value time: math, color, gradient, filter and variable resolution.

Math Functions

CSS Functions	Description
`calc()`	Performs calculations with mixed units, e.g. width: calc(100% - 20px).
`min()`	Returns the smallest of a list of values.
`max()`	Returns the largest of a list of values.
`clamp()`	Clamps a value between a min and max: clamp(MIN, VAL, MAX).

CSS Functions	Description
`rgb()`	Defines a color from red, green, blue channels (0-255).
`rgba()`	Like rgb() plus an alpha (opacity) channel 0-1.
`hsl()`	Defines a color by hue, saturation, lightness.
`hwb()`	Defines a color by hue, whiteness, blackness.
`color-mix()`	Blends two colors in a given color space.

CSS Functions	Description
`linear-gradient()`	Creates a gradient along a straight line.
`radial-gradient()`	Creates a gradient radiating from a center.
`conic-gradient()`	Creates a gradient rotated around a center point.

CSS Functions	Description
`var()`	Inserts the value of a custom property, e.g. var(--main).
`url()`	References a resource such as an image or font file.
`attr()`	Reads the value of an attribute on the element (limited use).

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。