CARVIEW |
Select Language
HTTP/2 200
date: Thu, 24 Jul 2025 13:56:09 GMT
content-type: text/html; charset=UTF-8
vary: Accept-Encoding
vary: Accept-Encoding
referrer-policy: strict-origin-when-cross-origin
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
strict-transport-security: max-age=31536000
link: ; rel="https://api.w.org/", ; rel="alternate"; title="JSON"; type="application/json", ; rel=shortlink
cache-provider: CLOUDWAYS-CACHE-DC
last-modified: Thu, 24 Jul 2025 12:15:47 GMT
cache-control: max-age=0, s-maxage=2592000
expires: Thu, 24 Jul 2025 12:15:46 GMT
age: 6021
x-cache: HIT
cf-cache-status: DYNAMIC
set-cookie: __cf_bm=IQYJYdV4HV1Qfzl529MHraptY0rC8.XrJaNInNXef2E-1753365369-1.0.1.1-QzCuIkcoyZGN.WujcgaBmFIEtBEzbhooOsxaIS7ZLx1oe6AhwqeKjA_cGxHOK3MwTHXhChrXE7EG75JJNUWU7mW4LTihM6I1SuQra4GUON4; path=/; expires=Thu, 24-Jul-25 14:26:09 GMT; domain=.css-tricks.com; HttpOnly; Secure; SameSite=None
server: cloudflare
cf-ray: 9643eb4fceb6e084-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