CARVIEW |
Select Language
HTTP/2 200
date: Fri, 25 Jul 2025 00:37:20 GMT
content-type: text/html; charset=utf-8
cache-provider: CLOUDWAYS-CACHE-DE
x-frame-options: SAMEORIGIN
referrer-policy: strict-origin-when-cross-origin
strict-transport-security: max-age=31536000
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
vary: Accept-Encoding
last-modified: Thu, 24 Jul 2025 12:15:47 GMT
cache-control: max-age=0, s-maxage=2592000
expires: Thu, 24 Jul 2025 22:10:49 GMT
age: 8790
x-cache: HIT
cf-cache-status: DYNAMIC
set-cookie: __cf_bm=Ho6b_cLI6cTKr8E9l6oyww7cYMknRP39wJALYfymHfQ-1753403840-1.0.1.1-wmhFnmdCS9.XjKsJ4b0qke4AbnaCyiVKTrCcOXYPsils1p.8ZPA9QWr9U1Zhq7Dc58aYdpRhH7IlseZ5Vd42rLrDSfQG3wuXy66PO4uArdQ; path=/; expires=Fri, 25-Jul-25 01:07:20 GMT; domain=.css-tricks.com; HttpOnly; Secure; SameSite=None
server: cloudflare
cf-ray: 9647968da93b6cd6-BLR
content-encoding: gzip
L | CSS-Tricks
Skip to main content
light-dark()
light-dark()
The light-dark() function takes two color values—one for “light” mode and one for “dark” mode, and automatically switches between them depending on […]
html { color: light-dark(#000, #fff); }
Continue Reading
lab()
lab()
The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.
.element { color: lab(50% 50% 50% / 0.5); }
Continue Reading
lch()
lch()
The lch()
color function specifies colors in the CIELAB color space. Unlike the lab()
function — which uses Cartesian coordinates — the lch()
function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive.
.element { color: lch(10% 0.215 15deg); }
Continue Reading
linear()
linear()
The linear()
function let us define stops in an animation/transition, which will progress sequentially along a straight line.
.element { animation-timing-function: linear(0, 0.25, 1); }
Continue Reading