CARVIEW |
Select Language
HTTP/2 200
date: Wed, 23 Jul 2025 22:01:27 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: Wed, 23 Jul 2025 13:38:31 GMT
cache-control: max-age=0, s-maxage=2592000
expires: Wed, 23 Jul 2025 21:49:48 GMT
age: 698
x-cache: HIT
cf-cache-status: DYNAMIC
set-cookie: __cf_bm=jL9yiJNQIHMTCgs8l1hjfmTpWqihwWb_sF26d8WRdVc-1753308087-1.0.1.1-8VFmhHL1iqgSziSRMFCacUcjJkw.bwml3Eti1NoGqOxeFzVCqWtpMCp1u8uI02dcqjLNKAo4hyuDV4S02yISjEBHsUMdzX1t_ruXPyNIrnA; path=/; expires=Wed, 23-Jul-25 22:31:27 GMT; domain=.css-tricks.com; HttpOnly; Secure; SameSite=None
server: cloudflare
cf-ray: 963e74d5894ae9c3-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