CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>CSS color values - CSS: Cascading Style Sheets | MDN</title><link rel="alternate" title="CSS Farbwerte" href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_colors/Color_values" hrefLang="de"/><link rel="alternate" title="CSS color values" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values" hrefLang="en"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="To represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking the color down into components, such as amounts of different primary colors to mix together, or brightness and hue. Defined color models ensure that colors will appear the same no matter where they are rendered."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values"/><meta property="og:title" content="CSS color values - CSS: Cascading Style Sheets | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="en_US"/><meta property="og:description" content="To represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking the color down into components, such as amounts of different primary colors to mix together, or brightness and hue. Defined color models ensure that colors will appear the same no matter where they are rendered."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.0ea0445c.js"></script><link href="/static/css/main.4634a21c.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-css document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/en-US/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/en-US/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/en-US/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/en-US/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/en-US/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_colors%2FColor_values" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_colors%2FColor_values" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">References</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/CSS" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/CSS/CSS_colors" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS colors</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/CSS/CSS_colors/Color_values" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Color values</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Web/CSS/CSS_colors/Color_values" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li></ul></div></div></li></ul></div></div></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#keywords">Keywords</a></li><li class="document-toc-item "><a class="document-toc-link" href="#rgb_values">RGB values</a></li><li class="document-toc-item "><a class="document-toc-link" href="#color_functions_with_a_hue_component">Color functions with a hue component</a></li><li class="document-toc-item "><a class="document-toc-link" href="#lab_and_oklab">Lab and OKLab</a></li><li class="document-toc-item "><a class="document-toc-link" href="#additional_color_functional_notations">Additional color functional notations</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/en-US/docs/Web/CSS">CSS</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core/Styling_basics">Beginner's tutorials</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">Your first website: Styling the content</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">What is CSS?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started">Getting started with CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Challenge: Styling a biography page</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Basic CSS selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribute selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudo-classes and pseudo-elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators">Combinators</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model">The box model</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Handling conflicts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS values and units</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing">Sizing items in CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Backgrounds and borders</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow">Overflowing content</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Images, media, and form elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Tables">Styling tables</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Challenge: Fundamental CSS comprehension</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Challenge: Creating fancy letterheaded paper</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Challenge: A cool-looking box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals">Fundamental text and font styling</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists">Styling lists</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links">Styling links</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web fonts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/CSS_layout">CSS layout</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction">Introduction to CSS layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning">Positioning</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Grids">CSS grid layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsive design</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries">Media query fundamentals</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a></li><li class="toggle"><details><summary>Modules</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_anchor_positioning">CSS anchor positioning</a></li><li><a href="/en-US/docs/Web/CSS/CSS_animations">CSS animations</a></li><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders">CSS backgrounds and borders</a></li><li><a href="/en-US/docs/Web/CSS/CSS_basic_user_interface">CSS basic user interface</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment">CSS box alignment</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_model">CSS box model</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_sizing">CSS box sizing</a></li><li><a href="/en-US/docs/Web/CSS/CSS_cascade">CSS cascading and inheritance</a></li><li><a href="/en-US/docs/Web/CSS/CSS_color_adjustment">CSS color adjustment</a></li><li><a href="/en-US/docs/Web/CSS/CSS_colors">CSS colors</a></li><li><a href="/en-US/docs/Web/CSS/CSS_compositing_and_blending">CSS compositing and blending</a></li><li><a href="/en-US/docs/Web/CSS/CSS_conditional_rules">CSS conditional rules</a></li><li><a href="/en-US/docs/Web/CSS/CSS_containment">CSS containment</a></li><li><a href="/en-US/docs/Web/CSS/CSS_counter_styles">CSS counter styles</a></li><li><a href="/en-US/docs/Web/CSS/CSS_cascading_variables">CSS custom properties for cascading variables</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display">CSS display</a></li><li><a href="/en-US/docs/Web/CSS/CSS_filter_effects">CSS filter effects</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout">CSS flexible box layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_font_loading">CSS font loading</a></li><li><a href="/en-US/docs/Web/CSS/CSS_fonts">CSS fonts</a></li><li><a href="/en-US/docs/Web/CSS/CSS_fragmentation">CSS fragmentation</a></li><li><a href="/en-US/docs/Web/CSS/CSS_generated_content">CSS generated content</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout">CSS grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_images">CSS images</a></li><li><a href="/en-US/docs/Web/CSS/CSS_inline_layout">CSS inline layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_lists">CSS lists and counters</a></li><li><a href="/en-US/docs/Web/CSS/CSS_logical_properties_and_values">CSS logical properties and values</a></li><li><a href="/en-US/docs/Web/CSS/CSS_masking">CSS masking</a></li><li><a href="/en-US/docs/Web/CSS/CSS_media_queries">CSS media queries</a></li><li><a href="/en-US/docs/Web/CSS/CSS_motion_path">CSS motion path</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout">CSS multi-column layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_namespaces">CSS namespaces</a></li><li><a href="/en-US/docs/Web/CSS/CSS_nesting">CSS nesting</a></li><li><a href="/en-US/docs/Web/CSS/CSS_overflow">CSS overflow</a></li><li><a href="/en-US/docs/Web/CSS/CSS_overscroll_behavior">CSS overscroll behavior</a></li><li><a href="/en-US/docs/Web/CSS/CSS_paged_media">CSS paged media</a></li><li><a href="/en-US/docs/Web/CSS/CSS_positioned_layout">CSS positioned layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_properties_and_values_API">CSS properties and values API</a></li><li><a href="/en-US/docs/Web/CSS/CSS_pseudo-elements">CSS pseudo-elements</a></li><li><a href="/en-US/docs/Web/CSS/CSS_ruby_layout">CSS ruby layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scoping">CSS scoping</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scroll_snap">CSS scroll snap</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scroll-driven_animations">CSS scroll-driven animations</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scrollbars_styling">CSS scrollbars styling</a></li><li><a href="/en-US/docs/Web/CSS/CSS_selectors">CSS selectors</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shadow_parts">CSS shadow parts</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes">CSS shapes</a></li><li><a href="/en-US/docs/Web/CSS/CSS_syntax">CSS syntax</a></li><li><a href="/en-US/docs/Web/CSS/CSS_table">CSS table</a></li><li><a href="/en-US/docs/Web/CSS/CSS_text">CSS text</a></li><li><a href="/en-US/docs/Web/CSS/CSS_text_decoration">CSS text decoration</a></li><li><a href="/en-US/docs/Web/CSS/CSS_transforms">CSS transforms</a></li><li><a href="/en-US/docs/Web/CSS/CSS_transitions">CSS transitions</a></li><li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS values and units</a></li><li><a href="/en-US/docs/Web/CSS/CSS_view_transitions">CSS view transitions</a></li><li><a href="/en-US/docs/Web/CSS/CSS_writing_modes">CSS writing modes</a></li><li><a href="/en-US/docs/Web/CSS/CSSOM_view">CSSOM view</a></li></ol></details></li><li class="toggle"><details><summary>Properties</summary><ol><li class="toggle"><details><summary>-moz-*</summary><ol><li><a href="/en-US/docs/Web/CSS/-moz-float-edge">-moz-float-edge</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-image-region">-moz-image-region</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-orient">-moz-orient</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-user-focus">-moz-user-focus</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-user-input">-moz-user-input</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>-webkit-*</summary><ol><li><a href="/en-US/docs/Web/CSS/-webkit-border-before">-webkit-border-before</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-box-reflect">-webkit-box-reflect</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-box-image">-webkit-mask-box-image</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-composite">-webkit-mask-composite</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-position-x">-webkit-mask-position-x</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-position-y">-webkit-mask-position-y</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-repeat-x">-webkit-mask-repeat-x</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-repeat-y">-webkit-mask-repeat-y</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-tap-highlight-color">-webkit-tap-highlight-color</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-fill-color">-webkit-text-fill-color</a></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-security">-webkit-text-security</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-stroke">-webkit-text-stroke</a></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-stroke-color">-webkit-text-stroke-color</a></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-stroke-width">-webkit-text-stroke-width</a></li><li><a href="/en-US/docs/Web/CSS/-webkit-touch-callout">-webkit-touch-callout</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/--*">Custom properties (--*): CSS variables</a></li><li><a href="/en-US/docs/Web/CSS/accent-color">accent-color</a></li><li class="toggle"><details><summary>align-*</summary><ol><li><a href="/en-US/docs/Web/CSS/align-content">align-content</a></li><li><a href="/en-US/docs/Web/CSS/align-items">align-items</a></li><li><a href="/en-US/docs/Web/CSS/align-self">align-self</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/alignment-baseline">alignment-baseline</a></li><li><a href="/en-US/docs/Web/CSS/all">all</a></li><li><a href="/en-US/docs/Web/CSS/anchor-name">anchor-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>animation-*</summary><ol><li><a href="/en-US/docs/Web/CSS/animation">animation</a></li><li><a href="/en-US/docs/Web/CSS/animation-composition">animation-composition</a></li><li><a href="/en-US/docs/Web/CSS/animation-delay">animation-delay</a></li><li><a href="/en-US/docs/Web/CSS/animation-direction">animation-direction</a></li><li><a href="/en-US/docs/Web/CSS/animation-duration">animation-duration</a></li><li><a href="/en-US/docs/Web/CSS/animation-fill-mode">animation-fill-mode</a></li><li><a href="/en-US/docs/Web/CSS/animation-iteration-count">animation-iteration-count</a></li><li><a href="/en-US/docs/Web/CSS/animation-name">animation-name</a></li><li><a href="/en-US/docs/Web/CSS/animation-play-state">animation-play-state</a></li><li><a href="/en-US/docs/Web/CSS/animation-range">animation-range</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-range-end">animation-range-end</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-range-start">animation-range-start</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-timeline">animation-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/appearance">appearance</a></li><li><a href="/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio</a></li><li><a href="/en-US/docs/Web/CSS/backdrop-filter">backdrop-filter</a></li><li><a href="/en-US/docs/Web/CSS/backface-visibility">backface-visibility</a></li><li class="toggle"><details><summary>background-*</summary><ol><li><a href="/en-US/docs/Web/CSS/background">background</a></li><li><a href="/en-US/docs/Web/CSS/background-attachment">background-attachment</a></li><li><a href="/en-US/docs/Web/CSS/background-blend-mode">background-blend-mode</a></li><li><a href="/en-US/docs/Web/CSS/background-clip">background-clip</a></li><li><a href="/en-US/docs/Web/CSS/background-color">background-color</a></li><li><a href="/en-US/docs/Web/CSS/background-image">background-image</a></li><li><a href="/en-US/docs/Web/CSS/background-origin">background-origin</a></li><li><a href="/en-US/docs/Web/CSS/background-position">background-position</a></li><li><a href="/en-US/docs/Web/CSS/background-position-x">background-position-x</a></li><li><a href="/en-US/docs/Web/CSS/background-position-y">background-position-y</a></li><li><a href="/en-US/docs/Web/CSS/background-repeat">background-repeat</a></li><li><a href="/en-US/docs/Web/CSS/background-size">background-size</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/block-size">block-size</a></li><li class="toggle"><details><summary>border-*</summary><ol><li><a href="/en-US/docs/Web/CSS/border">border</a></li><li><a href="/en-US/docs/Web/CSS/border-block">border-block</a></li><li><a href="/en-US/docs/Web/CSS/border-block-color">border-block-color</a></li><li><a href="/en-US/docs/Web/CSS/border-block-end">border-block-end</a></li><li><a href="/en-US/docs/Web/CSS/border-block-end-color">border-block-end-color</a></li><li><a href="/en-US/docs/Web/CSS/border-block-end-style">border-block-end-style</a></li><li><a href="/en-US/docs/Web/CSS/border-block-end-width">border-block-end-width</a></li><li><a href="/en-US/docs/Web/CSS/border-block-start">border-block-start</a></li><li><a href="/en-US/docs/Web/CSS/border-block-start-color">border-block-start-color</a></li><li><a href="/en-US/docs/Web/CSS/border-block-start-style">border-block-start-style</a></li><li><a href="/en-US/docs/Web/CSS/border-block-start-width">border-block-start-width</a></li><li><a href="/en-US/docs/Web/CSS/border-block-style">border-block-style</a></li><li><a href="/en-US/docs/Web/CSS/border-block-width">border-block-width</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom">border-bottom</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-left-radius">border-bottom-left-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-right-radius">border-bottom-right-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-style">border-bottom-style</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-width">border-bottom-width</a></li><li><a href="/en-US/docs/Web/CSS/border-collapse">border-collapse</a></li><li><a href="/en-US/docs/Web/CSS/border-color">border-color</a></li><li><a href="/en-US/docs/Web/CSS/border-end-end-radius">border-end-end-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-end-start-radius">border-end-start-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-image">border-image</a></li><li><a href="/en-US/docs/Web/CSS/border-image-outset">border-image-outset</a></li><li><a href="/en-US/docs/Web/CSS/border-image-repeat">border-image-repeat</a></li><li><a href="/en-US/docs/Web/CSS/border-image-slice">border-image-slice</a></li><li><a href="/en-US/docs/Web/CSS/border-image-source">border-image-source</a></li><li><a href="/en-US/docs/Web/CSS/border-image-width">border-image-width</a></li><li><a href="/en-US/docs/Web/CSS/border-inline">border-inline</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-color">border-inline-color</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-end">border-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-end-color">border-inline-end-color</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-end-style">border-inline-end-style</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-end-width">border-inline-end-width</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-start">border-inline-start</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-start-color">border-inline-start-color</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-start-style">border-inline-start-style</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-start-width">border-inline-start-width</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-style">border-inline-style</a></li><li><a href="/en-US/docs/Web/CSS/border-inline-width">border-inline-width</a></li><li><a href="/en-US/docs/Web/CSS/border-left">border-left</a></li><li><a href="/en-US/docs/Web/CSS/border-left-color">border-left-color</a></li><li><a href="/en-US/docs/Web/CSS/border-left-style">border-left-style</a></li><li><a href="/en-US/docs/Web/CSS/border-left-width">border-left-width</a></li><li><a href="/en-US/docs/Web/CSS/border-radius">border-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-right">border-right</a></li><li><a href="/en-US/docs/Web/CSS/border-right-color">border-right-color</a></li><li><a href="/en-US/docs/Web/CSS/border-right-style">border-right-style</a></li><li><a href="/en-US/docs/Web/CSS/border-right-width">border-right-width</a></li><li><a href="/en-US/docs/Web/CSS/border-spacing">border-spacing</a></li><li><a href="/en-US/docs/Web/CSS/border-start-end-radius">border-start-end-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-start-start-radius">border-start-start-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-style">border-style</a></li><li><a href="/en-US/docs/Web/CSS/border-top">border-top</a></li><li><a href="/en-US/docs/Web/CSS/border-top-color">border-top-color</a></li><li><a href="/en-US/docs/Web/CSS/border-top-left-radius">border-top-left-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-top-right-radius">border-top-right-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-top-style">border-top-style</a></li><li><a href="/en-US/docs/Web/CSS/border-top-width">border-top-width</a></li><li><a href="/en-US/docs/Web/CSS/border-width">border-width</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/bottom">bottom</a></li><li class="toggle"><details><summary>box-*</summary><ol><li><a href="/en-US/docs/Web/CSS/box-align">box-align</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-decoration-break">box-decoration-break</a></li><li><a href="/en-US/docs/Web/CSS/box-direction">box-direction</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-flex">box-flex</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-flex-group">box-flex-group</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-lines">box-lines</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-ordinal-group">box-ordinal-group</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-orient">box-orient</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-pack">box-pack</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></li><li><a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a></li></ol></details></li><li class="toggle"><details><summary>break-*</summary><ol><li><a href="/en-US/docs/Web/CSS/break-after">break-after</a></li><li><a href="/en-US/docs/Web/CSS/break-before">break-before</a></li><li><a href="/en-US/docs/Web/CSS/break-inside">break-inside</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/caption-side">caption-side</a></li><li><a href="/en-US/docs/Web/CSS/caret-color">caret-color</a></li><li><a href="/en-US/docs/Web/CSS/clear">clear</a></li><li class="toggle"><details><summary>clip-*</summary><ol><li><a href="/en-US/docs/Web/CSS/clip">clip</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/clip-path">clip-path</a></li><li><a href="/en-US/docs/Web/CSS/clip-rule">clip-rule</a></li></ol></details></li><li class="toggle"><details><summary>color-*</summary><ol><li><a href="/en-US/docs/Web/CSS/color">color</a></li><li><a href="/en-US/docs/Web/CSS/color-interpolation">color-interpolation</a></li><li><a href="/en-US/docs/Web/CSS/color-interpolation-filters">color-interpolation-filters</a></li><li><a href="/en-US/docs/Web/CSS/color-scheme">color-scheme</a></li></ol></details></li><li class="toggle"><details><summary>column-*</summary><ol><li><a href="/en-US/docs/Web/CSS/column-count">column-count</a></li><li><a href="/en-US/docs/Web/CSS/column-fill">column-fill</a></li><li><a href="/en-US/docs/Web/CSS/column-gap">column-gap</a></li><li><a href="/en-US/docs/Web/CSS/column-rule">column-rule</a></li><li><a href="/en-US/docs/Web/CSS/column-rule-color">column-rule-color</a></li><li><a href="/en-US/docs/Web/CSS/column-rule-style">column-rule-style</a></li><li><a href="/en-US/docs/Web/CSS/column-rule-width">column-rule-width</a></li><li><a href="/en-US/docs/Web/CSS/column-span">column-span</a></li><li><a href="/en-US/docs/Web/CSS/column-width">column-width</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/columns">columns</a></li><li class="toggle"><details><summary>contain-*</summary><ol><li><a href="/en-US/docs/Web/CSS/contain">contain</a></li><li><a href="/en-US/docs/Web/CSS/contain-intrinsic-block-size">contain-intrinsic-block-size</a></li><li><a href="/en-US/docs/Web/CSS/contain-intrinsic-height">contain-intrinsic-height</a></li><li><a href="/en-US/docs/Web/CSS/contain-intrinsic-inline-size">contain-intrinsic-inline-size</a></li><li><a href="/en-US/docs/Web/CSS/contain-intrinsic-size">contain-intrinsic-size</a></li><li><a href="/en-US/docs/Web/CSS/contain-intrinsic-width">contain-intrinsic-width</a></li></ol></details></li><li class="toggle"><details><summary>container-*</summary><ol><li><a href="/en-US/docs/Web/CSS/container">container</a></li><li><a href="/en-US/docs/Web/CSS/container-name">container-name</a></li><li><a href="/en-US/docs/Web/CSS/container-type">container-type</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/content">content</a></li><li><a href="/en-US/docs/Web/CSS/content-visibility">content-visibility</a></li><li class="toggle"><details><summary>counter-*</summary><ol><li><a href="/en-US/docs/Web/CSS/counter-increment">counter-increment</a></li><li><a href="/en-US/docs/Web/CSS/counter-reset">counter-reset</a></li><li><a href="/en-US/docs/Web/CSS/counter-set">counter-set</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/cursor">cursor</a></li><li><a href="/en-US/docs/Web/CSS/cx">cx</a></li><li><a href="/en-US/docs/Web/CSS/cy">cy</a></li><li><a href="/en-US/docs/Web/CSS/d">d</a></li><li><a href="/en-US/docs/Web/CSS/direction">direction</a></li><li><a href="/en-US/docs/Web/CSS/display">display</a></li><li><a href="/en-US/docs/Web/CSS/dominant-baseline">dominant-baseline</a></li><li><a href="/en-US/docs/Web/CSS/empty-cells">empty-cells</a></li><li><a href="/en-US/docs/Web/CSS/field-sizing">field-sizing</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>fill-*</summary><ol><li><a href="/en-US/docs/Web/CSS/fill">fill</a></li><li><a href="/en-US/docs/Web/CSS/fill-opacity">fill-opacity</a></li><li><a href="/en-US/docs/Web/CSS/fill-rule">fill-rule</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/filter">filter</a></li><li class="toggle"><details><summary>flex-*</summary><ol><li><a href="/en-US/docs/Web/CSS/flex">flex</a></li><li><a href="/en-US/docs/Web/CSS/flex-basis">flex-basis</a></li><li><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></li><li><a href="/en-US/docs/Web/CSS/flex-flow">flex-flow</a></li><li><a href="/en-US/docs/Web/CSS/flex-grow">flex-grow</a></li><li><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></li><li><a href="/en-US/docs/Web/CSS/flex-wrap">flex-wrap</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/float">float</a></li><li><a href="/en-US/docs/Web/CSS/flood-color">flood-color</a></li><li><a href="/en-US/docs/Web/CSS/flood-opacity">flood-opacity</a></li><li class="toggle"><details><summary>font-*</summary><ol><li><a href="/en-US/docs/Web/CSS/font">font</a></li><li><a href="/en-US/docs/Web/CSS/font-family">font-family</a></li><li><a href="/en-US/docs/Web/CSS/font-feature-settings">font-feature-settings</a></li><li><a href="/en-US/docs/Web/CSS/font-kerning">font-kerning</a></li><li><a href="/en-US/docs/Web/CSS/font-language-override">font-language-override</a></li><li><a href="/en-US/docs/Web/CSS/font-optical-sizing">font-optical-sizing</a></li><li><a href="/en-US/docs/Web/CSS/font-palette">font-palette</a></li><li><a href="/en-US/docs/Web/CSS/font-size">font-size</a></li><li><a href="/en-US/docs/Web/CSS/font-size-adjust">font-size-adjust</a></li><li><a href="/en-US/docs/Web/CSS/font-smooth">font-smooth</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/font-stretch">font-stretch</a></li><li><a href="/en-US/docs/Web/CSS/font-style">font-style</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis">font-synthesis</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-position">font-synthesis-position</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-small-caps">font-synthesis-small-caps</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-style">font-synthesis-style</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-weight">font-synthesis-weight</a></li><li><a href="/en-US/docs/Web/CSS/font-variant">font-variant</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-alternates">font-variant-alternates</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-caps">font-variant-caps</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-east-asian">font-variant-east-asian</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-emoji">font-variant-emoji</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-ligatures">font-variant-ligatures</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-numeric">font-variant-numeric</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-position">font-variant-position</a></li><li><a href="/en-US/docs/Web/CSS/font-variation-settings">font-variation-settings</a></li><li><a href="/en-US/docs/Web/CSS/font-weight">font-weight</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/forced-color-adjust">forced-color-adjust</a></li><li><a href="/en-US/docs/Web/CSS/gap">gap</a></li><li class="toggle"><details><summary>grid-*</summary><ol><li><a href="/en-US/docs/Web/CSS/grid">grid</a></li><li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li><li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li><li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li><li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li><li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li><li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li><li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li><li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li><li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li><li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li><li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li><li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li><li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li><li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/hanging-punctuation">hanging-punctuation</a></li><li><a href="/en-US/docs/Web/CSS/height">height</a></li><li><a href="/en-US/docs/Web/CSS/hyphenate-character">hyphenate-character</a></li><li><a href="/en-US/docs/Web/CSS/hyphenate-limit-chars">hyphenate-limit-chars</a></li><li><a href="/en-US/docs/Web/CSS/hyphens">hyphens</a></li><li class="toggle"><details><summary>image-*</summary><ol><li><a href="/en-US/docs/Web/CSS/image-orientation">image-orientation</a></li><li><a href="/en-US/docs/Web/CSS/image-rendering">image-rendering</a></li><li><a href="/en-US/docs/Web/CSS/image-resolution">image-resolution</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/initial-letter">initial-letter</a></li><li><a href="/en-US/docs/Web/CSS/inline-size">inline-size</a></li><li class="toggle"><details><summary>inset-*</summary><ol><li><a href="/en-US/docs/Web/CSS/inset">inset</a></li><li><a href="/en-US/docs/Web/CSS/inset-block">inset-block</a></li><li><a href="/en-US/docs/Web/CSS/inset-block-end">inset-block-end</a></li><li><a href="/en-US/docs/Web/CSS/inset-block-start">inset-block-start</a></li><li><a href="/en-US/docs/Web/CSS/inset-inline">inset-inline</a></li><li><a href="/en-US/docs/Web/CSS/inset-inline-end">inset-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/inset-inline-start">inset-inline-start</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/interpolate-size">interpolate-size</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/isolation">isolation</a></li><li class="toggle"><details><summary>justify-*</summary><ol><li><a href="/en-US/docs/Web/CSS/justify-content">justify-content</a></li><li><a href="/en-US/docs/Web/CSS/justify-items">justify-items</a></li><li><a href="/en-US/docs/Web/CSS/justify-self">justify-self</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/left">left</a></li><li><a href="/en-US/docs/Web/CSS/letter-spacing">letter-spacing</a></li><li><a href="/en-US/docs/Web/CSS/lighting-color">lighting-color</a></li><li class="toggle"><details><summary>line-*</summary><ol><li><a href="/en-US/docs/Web/CSS/line-break">line-break</a></li><li><a href="/en-US/docs/Web/CSS/line-clamp">line-clamp</a></li><li><a href="/en-US/docs/Web/CSS/line-height">line-height</a></li><li><a href="/en-US/docs/Web/CSS/line-height-step">line-height-step</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>list-*</summary><ol><li><a href="/en-US/docs/Web/CSS/list-style">list-style</a></li><li><a href="/en-US/docs/Web/CSS/list-style-image">list-style-image</a></li><li><a href="/en-US/docs/Web/CSS/list-style-position">list-style-position</a></li><li><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></li></ol></details></li><li class="toggle"><details><summary>margin-*</summary><ol><li><a href="/en-US/docs/Web/CSS/margin">margin</a></li><li><a href="/en-US/docs/Web/CSS/margin-block">margin-block</a></li><li><a href="/en-US/docs/Web/CSS/margin-block-end">margin-block-end</a></li><li><a href="/en-US/docs/Web/CSS/margin-block-start">margin-block-start</a></li><li><a href="/en-US/docs/Web/CSS/margin-bottom">margin-bottom</a></li><li><a href="/en-US/docs/Web/CSS/margin-inline">margin-inline</a></li><li><a href="/en-US/docs/Web/CSS/margin-inline-end">margin-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/margin-inline-start">margin-inline-start</a></li><li><a href="/en-US/docs/Web/CSS/margin-left">margin-left</a></li><li><a href="/en-US/docs/Web/CSS/margin-right">margin-right</a></li><li><a href="/en-US/docs/Web/CSS/margin-top">margin-top</a></li><li><a href="/en-US/docs/Web/CSS/margin-trim">margin-trim</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>marker-*</summary><ol><li><a href="/en-US/docs/Web/CSS/marker">marker</a></li><li><a href="/en-US/docs/Web/CSS/marker-end">marker-end</a></li><li><a href="/en-US/docs/Web/CSS/marker-mid">marker-mid</a></li><li><a href="/en-US/docs/Web/CSS/marker-start">marker-start</a></li></ol></details></li><li class="toggle"><details><summary>mask-*</summary><ol><li><a href="/en-US/docs/Web/CSS/mask">mask</a></li><li><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-mode">mask-border-mode</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-outset">mask-border-outset</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-repeat">mask-border-repeat</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-source">mask-border-source</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-width">mask-border-width</a></li><li><a href="/en-US/docs/Web/CSS/mask-clip">mask-clip</a></li><li><a href="/en-US/docs/Web/CSS/mask-composite">mask-composite</a></li><li><a href="/en-US/docs/Web/CSS/mask-image">mask-image</a></li><li><a href="/en-US/docs/Web/CSS/mask-mode">mask-mode</a></li><li><a href="/en-US/docs/Web/CSS/mask-origin">mask-origin</a></li><li><a href="/en-US/docs/Web/CSS/mask-position">mask-position</a></li><li><a href="/en-US/docs/Web/CSS/mask-repeat">mask-repeat</a></li><li><a href="/en-US/docs/Web/CSS/mask-size">mask-size</a></li><li><a href="/en-US/docs/Web/CSS/mask-type">mask-type</a></li></ol></details></li><li class="toggle"><details><summary>math-*</summary><ol><li><a href="/en-US/docs/Web/CSS/math-depth">math-depth</a></li><li><a href="/en-US/docs/Web/CSS/math-shift">math-shift</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/math-style">math-style</a></li></ol></details></li><li class="toggle"><details><summary>max-*</summary><ol><li><a href="/en-US/docs/Web/CSS/max-block-size">max-block-size</a></li><li><a href="/en-US/docs/Web/CSS/max-height">max-height</a></li><li><a href="/en-US/docs/Web/CSS/max-inline-size">max-inline-size</a></li><li><a href="/en-US/docs/Web/CSS/max-width">max-width</a></li></ol></details></li><li class="toggle"><details><summary>min-*</summary><ol><li><a href="/en-US/docs/Web/CSS/min-block-size">min-block-size</a></li><li><a href="/en-US/docs/Web/CSS/min-height">min-height</a></li><li><a href="/en-US/docs/Web/CSS/min-inline-size">min-inline-size</a></li><li><a href="/en-US/docs/Web/CSS/min-width">min-width</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/mix-blend-mode">mix-blend-mode</a></li><li><a href="/en-US/docs/Web/CSS/object-fit">object-fit</a></li><li><a href="/en-US/docs/Web/CSS/object-position">object-position</a></li><li class="toggle"><details><summary>offset-*</summary><ol><li><a href="/en-US/docs/Web/CSS/offset">offset</a></li><li><a href="/en-US/docs/Web/CSS/offset-anchor">offset-anchor</a></li><li><a href="/en-US/docs/Web/CSS/offset-distance">offset-distance</a></li><li><a href="/en-US/docs/Web/CSS/offset-path">offset-path</a></li><li><a href="/en-US/docs/Web/CSS/offset-position">offset-position</a></li><li><a href="/en-US/docs/Web/CSS/offset-rotate">offset-rotate</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/opacity">opacity</a></li><li><a href="/en-US/docs/Web/CSS/order">order</a></li><li><a href="/en-US/docs/Web/CSS/orphans">orphans</a></li><li class="toggle"><details><summary>outline-*</summary><ol><li><a href="/en-US/docs/Web/CSS/outline">outline</a></li><li><a href="/en-US/docs/Web/CSS/outline-color">outline-color</a></li><li><a href="/en-US/docs/Web/CSS/outline-offset">outline-offset</a></li><li><a href="/en-US/docs/Web/CSS/outline-style">outline-style</a></li><li><a href="/en-US/docs/Web/CSS/outline-width">outline-width</a></li></ol></details></li><li class="toggle"><details><summary>overflow-*</summary><ol><li><a href="/en-US/docs/Web/CSS/overflow">overflow</a></li><li><a href="/en-US/docs/Web/CSS/overflow-anchor">overflow-anchor</a></li><li><a href="/en-US/docs/Web/CSS/overflow-block">overflow-block</a></li><li><a href="/en-US/docs/Web/CSS/overflow-clip-margin">overflow-clip-margin</a></li><li><a href="/en-US/docs/Web/CSS/overflow-inline">overflow-inline</a></li><li><a href="/en-US/docs/Web/CSS/overflow-wrap">overflow-wrap</a></li><li><a href="/en-US/docs/Web/CSS/overflow-x">overflow-x</a></li><li><a href="/en-US/docs/Web/CSS/overflow-y">overflow-y</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/overlay">overlay</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>overscroll-*</summary><ol><li><a href="/en-US/docs/Web/CSS/overscroll-behavior">overscroll-behavior</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-block">overscroll-behavior-block</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-inline">overscroll-behavior-inline</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-x">overscroll-behavior-x</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-y">overscroll-behavior-y</a></li></ol></details></li><li class="toggle"><details><summary>padding-*</summary><ol><li><a href="/en-US/docs/Web/CSS/padding">padding</a></li><li><a href="/en-US/docs/Web/CSS/padding-block">padding-block</a></li><li><a href="/en-US/docs/Web/CSS/padding-block-end">padding-block-end</a></li><li><a href="/en-US/docs/Web/CSS/padding-block-start">padding-block-start</a></li><li><a href="/en-US/docs/Web/CSS/padding-bottom">padding-bottom</a></li><li><a href="/en-US/docs/Web/CSS/padding-inline">padding-inline</a></li><li><a href="/en-US/docs/Web/CSS/padding-inline-end">padding-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/padding-inline-start">padding-inline-start</a></li><li><a href="/en-US/docs/Web/CSS/padding-left">padding-left</a></li><li><a href="/en-US/docs/Web/CSS/padding-right">padding-right</a></li><li><a href="/en-US/docs/Web/CSS/padding-top">padding-top</a></li></ol></details></li><li class="toggle"><details><summary>page-*</summary><ol><li><a href="/en-US/docs/Web/CSS/page">page</a></li><li><a href="/en-US/docs/Web/CSS/page-break-after">page-break-after</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/page-break-before">page-break-before</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/page-break-inside">page-break-inside</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/paint-order">paint-order</a></li><li><a href="/en-US/docs/Web/CSS/perspective">perspective</a></li><li><a href="/en-US/docs/Web/CSS/perspective-origin">perspective-origin</a></li><li class="toggle"><details><summary>place-*</summary><ol><li><a href="/en-US/docs/Web/CSS/place-content">place-content</a></li><li><a href="/en-US/docs/Web/CSS/place-items">place-items</a></li><li><a href="/en-US/docs/Web/CSS/place-self">place-self</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/pointer-events">pointer-events</a></li><li class="toggle"><details><summary>position-*</summary><ol><li><a href="/en-US/docs/Web/CSS/position">position</a></li><li><a href="/en-US/docs/Web/CSS/position-anchor">position-anchor</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-area">position-area</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try">position-try</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try-fallbacks">position-try-fallbacks</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try-order">position-try-order</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-visibility">position-visibility</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/print-color-adjust">print-color-adjust</a></li><li><a href="/en-US/docs/Web/CSS/quotes">quotes</a></li><li><a href="/en-US/docs/Web/CSS/r">r</a></li><li><a href="/en-US/docs/Web/CSS/resize">resize</a></li><li><a href="/en-US/docs/Web/CSS/right">right</a></li><li><a href="/en-US/docs/Web/CSS/rotate">rotate</a></li><li><a href="/en-US/docs/Web/CSS/row-gap">row-gap</a></li><li><a href="/en-US/docs/Web/CSS/ruby-align">ruby-align</a></li><li><a href="/en-US/docs/Web/CSS/ruby-position">ruby-position</a></li><li><a href="/en-US/docs/Web/CSS/rx">rx</a></li><li><a href="/en-US/docs/Web/CSS/ry">ry</a></li><li><a href="/en-US/docs/Web/CSS/scale">scale</a></li><li class="toggle"><details><summary>scroll-*</summary><ol><li><a href="/en-US/docs/Web/CSS/scroll-behavior">scroll-behavior</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin">scroll-margin</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-block">scroll-margin-block</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-block-end">scroll-margin-block-end</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-block-start">scroll-margin-block-start</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-bottom">scroll-margin-bottom</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-inline">scroll-margin-inline</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-inline-end">scroll-margin-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-inline-start">scroll-margin-inline-start</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-left">scroll-margin-left</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-right">scroll-margin-right</a></li><li><a href="/en-US/docs/Web/CSS/scroll-margin-top">scroll-margin-top</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding">scroll-padding</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-block">scroll-padding-block</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-block-end">scroll-padding-block-end</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-block-start">scroll-padding-block-start</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-bottom">scroll-padding-bottom</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-inline">scroll-padding-inline</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-inline-end">scroll-padding-inline-end</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-inline-start">scroll-padding-inline-start</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-left">scroll-padding-left</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-right">scroll-padding-right</a></li><li><a href="/en-US/docs/Web/CSS/scroll-padding-top">scroll-padding-top</a></li><li><a href="/en-US/docs/Web/CSS/scroll-snap-align">scroll-snap-align</a></li><li><a href="/en-US/docs/Web/CSS/scroll-snap-stop">scroll-snap-stop</a></li><li><a href="/en-US/docs/Web/CSS/scroll-snap-type">scroll-snap-type</a></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline">scroll-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline-axis">scroll-timeline-axis</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline-name">scroll-timeline-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>scrollbar-*</summary><ol><li><a href="/en-US/docs/Web/CSS/scrollbar-color">scrollbar-color</a></li><li><a href="/en-US/docs/Web/CSS/scrollbar-gutter">scrollbar-gutter</a></li><li><a href="/en-US/docs/Web/CSS/scrollbar-width">scrollbar-width</a></li></ol></details></li><li class="toggle"><details><summary>shape-*</summary><ol><li><a href="/en-US/docs/Web/CSS/shape-image-threshold">shape-image-threshold</a></li><li><a href="/en-US/docs/Web/CSS/shape-margin">shape-margin</a></li><li><a href="/en-US/docs/Web/CSS/shape-outside">shape-outside</a></li><li><a href="/en-US/docs/Web/CSS/shape-rendering">shape-rendering</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/stop-color">stop-color</a></li><li><a href="/en-US/docs/Web/CSS/stop-opacity">stop-opacity</a></li><li class="toggle"><details><summary>stroke-*</summary><ol><li><a href="/en-US/docs/Web/CSS/stroke">stroke</a></li><li><a href="/en-US/docs/Web/CSS/stroke-dasharray">stroke-dasharray</a></li><li><a href="/en-US/docs/Web/CSS/stroke-dashoffset">stroke-dashoffset</a></li><li><a href="/en-US/docs/Web/CSS/stroke-linecap">stroke-linecap</a></li><li><a href="/en-US/docs/Web/CSS/stroke-linejoin">stroke-linejoin</a></li><li><a href="/en-US/docs/Web/CSS/stroke-miterlimit">stroke-miterlimit</a></li><li><a href="/en-US/docs/Web/CSS/stroke-opacity">stroke-opacity</a></li><li><a href="/en-US/docs/Web/CSS/stroke-width">stroke-width</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/tab-size">tab-size</a></li><li><a href="/en-US/docs/Web/CSS/table-layout">table-layout</a></li><li class="toggle"><details><summary>text-*</summary><ol><li><a href="/en-US/docs/Web/CSS/text-align">text-align</a></li><li><a href="/en-US/docs/Web/CSS/text-align-last">text-align-last</a></li><li><a href="/en-US/docs/Web/CSS/text-anchor">text-anchor</a></li><li><a href="/en-US/docs/Web/CSS/text-combine-upright">text-combine-upright</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration">text-decoration</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration-color">text-decoration-color</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration-line">text-decoration-line</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration-skip">text-decoration-skip</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/text-decoration-skip-ink">text-decoration-skip-ink</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration-style">text-decoration-style</a></li><li><a href="/en-US/docs/Web/CSS/text-decoration-thickness">text-decoration-thickness</a></li><li><a href="/en-US/docs/Web/CSS/text-emphasis">text-emphasis</a></li><li><a href="/en-US/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a></li><li><a href="/en-US/docs/Web/CSS/text-emphasis-position">text-emphasis-position</a></li><li><a href="/en-US/docs/Web/CSS/text-emphasis-style">text-emphasis-style</a></li><li><a href="/en-US/docs/Web/CSS/text-indent">text-indent</a></li><li><a href="/en-US/docs/Web/CSS/text-justify">text-justify</a></li><li><a href="/en-US/docs/Web/CSS/text-orientation">text-orientation</a></li><li><a href="/en-US/docs/Web/CSS/text-overflow">text-overflow</a></li><li><a href="/en-US/docs/Web/CSS/text-rendering">text-rendering</a></li><li><a href="/en-US/docs/Web/CSS/text-shadow">text-shadow</a></li><li><a href="/en-US/docs/Web/CSS/text-size-adjust">text-size-adjust</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/text-spacing-trim">text-spacing-trim</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/text-transform">text-transform</a></li><li><a href="/en-US/docs/Web/CSS/text-underline-offset">text-underline-offset</a></li><li><a href="/en-US/docs/Web/CSS/text-underline-position">text-underline-position</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap">text-wrap</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap-mode">text-wrap-mode</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap-style">text-wrap-style</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/timeline-scope">timeline-scope</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/top">top</a></li><li><a href="/en-US/docs/Web/CSS/touch-action">touch-action</a></li><li class="toggle"><details><summary>transform-*</summary><ol><li><a href="/en-US/docs/Web/CSS/transform">transform</a></li><li><a href="/en-US/docs/Web/CSS/transform-box">transform-box</a></li><li><a href="/en-US/docs/Web/CSS/transform-origin">transform-origin</a></li><li><a href="/en-US/docs/Web/CSS/transform-style">transform-style</a></li></ol></details></li><li class="toggle"><details><summary>transition-*</summary><ol><li><a href="/en-US/docs/Web/CSS/transition">transition</a></li><li><a href="/en-US/docs/Web/CSS/transition-behavior">transition-behavior</a></li><li><a href="/en-US/docs/Web/CSS/transition-delay">transition-delay</a></li><li><a href="/en-US/docs/Web/CSS/transition-duration">transition-duration</a></li><li><a href="/en-US/docs/Web/CSS/transition-property">transition-property</a></li><li><a href="/en-US/docs/Web/CSS/transition-timing-function">transition-timing-function</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/translate">translate</a></li><li><a href="/en-US/docs/Web/CSS/unicode-bidi">unicode-bidi</a></li><li><a href="/en-US/docs/Web/CSS/user-modify">user-modify</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/user-select">user-select</a></li><li><a href="/en-US/docs/Web/CSS/vector-effect">vector-effect</a></li><li><a href="/en-US/docs/Web/CSS/vertical-align">vertical-align</a></li><li class="toggle"><details><summary>view-*</summary><ol><li><a href="/en-US/docs/Web/CSS/view-timeline">view-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-axis">view-timeline-axis</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-inset">view-timeline-inset</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-name">view-timeline-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-transition-name">view-transition-name</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/visibility">visibility</a></li><li><a href="/en-US/docs/Web/CSS/white-space">white-space</a></li><li><a href="/en-US/docs/Web/CSS/white-space-collapse">white-space-collapse</a></li><li><a href="/en-US/docs/Web/CSS/widows">widows</a></li><li><a href="/en-US/docs/Web/CSS/width">width</a></li><li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li><li><a href="/en-US/docs/Web/CSS/word-break">word-break</a></li><li><a href="/en-US/docs/Web/CSS/word-spacing">word-spacing</a></li><li><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></li><li><a href="/en-US/docs/Web/CSS/x">x</a></li><li><a href="/en-US/docs/Web/CSS/y">y</a></li><li><a href="/en-US/docs/Web/CSS/z-index">z-index</a></li><li><a href="/en-US/docs/Web/CSS/zoom">zoom</a></li></ol></details></li><li class="toggle"><details><summary>Selectors</summary><ol><li><a href="/en-US/docs/Web/CSS/Nesting_selector">& nesting selector</a></li><li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></li><li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a></li><li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a></li><li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a></li><li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a></li></ol></details></li><li class="toggle"><details><summary>Combinators</summary><ol><li><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></li><li><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></li><li><a href="/en-US/docs/Web/CSS/Namespace_separator">Namespace separator</a></li><li><a href="/en-US/docs/Web/CSS/Next-sibling_combinator">Next-sibling combinator</a></li><li><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a></li><li><a href="/en-US/docs/Web/CSS/Subsequent-sibling_combinator">Subsequent-sibling combinator</a></li></ol></details></li><li class="toggle"><details><summary>Pseudo-classes</summary><ol><li class="toggle"><details><summary>:-moz-*</summary><ol><li><a href="/en-US/docs/Web/CSS/:-moz-broken">:-moz-broken</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-drag-over">:-moz-drag-over</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-first-node">:-moz-first-node</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-blocked">:-moz-handler-blocked</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-crashed">:-moz-handler-crashed</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-disabled">:-moz-handler-disabled</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-last-node">:-moz-last-node</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-loading">:-moz-loading</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-locale-dir_ltr">:-moz-locale-dir(ltr)</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-locale-dir_rtl">:-moz-locale-dir(rtl)</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-only-whitespace">:-moz-only-whitespace</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-submit-invalid">:-moz-submit-invalid</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-suppressed">:-moz-suppressed</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-user-disabled">:-moz-user-disabled</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-window-inactive">:-moz-window-inactive</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/:active">:active</a></li><li><a href="/en-US/docs/Web/CSS/:any-link">:any-link</a></li><li><a href="/en-US/docs/Web/CSS/:autofill">:autofill</a></li><li><a href="/en-US/docs/Web/CSS/:blank">:blank</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:buffering">:buffering</a></li><li><a href="/en-US/docs/Web/CSS/:checked">:checked</a></li><li><a href="/en-US/docs/Web/CSS/:current">:current</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:default">:default</a></li><li><a href="/en-US/docs/Web/CSS/:defined">:defined</a></li><li><a href="/en-US/docs/Web/CSS/:dir">:dir()</a></li><li><a href="/en-US/docs/Web/CSS/:disabled">:disabled</a></li><li><a href="/en-US/docs/Web/CSS/:empty">:empty</a></li><li><a href="/en-US/docs/Web/CSS/:enabled">:enabled</a></li><li class="toggle"><details><summary>:first-*</summary><ol><li><a href="/en-US/docs/Web/CSS/:first">:first</a></li><li><a href="/en-US/docs/Web/CSS/:first-child">:first-child</a></li><li><a href="/en-US/docs/Web/CSS/:first-of-type">:first-of-type</a></li></ol></details></li><li class="toggle"><details><summary>:focus-*</summary><ol><li><a href="/en-US/docs/Web/CSS/:focus">:focus</a></li><li><a href="/en-US/docs/Web/CSS/:focus-visible">:focus-visible</a></li><li><a href="/en-US/docs/Web/CSS/:focus-within">:focus-within</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/:fullscreen">:fullscreen</a></li><li><a href="/en-US/docs/Web/CSS/:future">:future</a></li><li><a href="/en-US/docs/Web/CSS/:has-slotted">:has-slotted</a></li><li><a href="/en-US/docs/Web/CSS/:has">:has()</a></li><li><a href="/en-US/docs/Web/CSS/:host">:host</a></li><li><a href="/en-US/docs/Web/CSS/:host-context">:host-context()</a></li><li><a href="/en-US/docs/Web/CSS/:host_function">:host()</a></li><li><a href="/en-US/docs/Web/CSS/:hover">:hover</a></li><li><a href="/en-US/docs/Web/CSS/:in-range">:in-range</a></li><li><a href="/en-US/docs/Web/CSS/:indeterminate">:indeterminate</a></li><li><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></li><li><a href="/en-US/docs/Web/CSS/:is">:is()</a></li><li><a href="/en-US/docs/Web/CSS/:lang">:lang()</a></li><li><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></li><li><a href="/en-US/docs/Web/CSS/:last-of-type">:last-of-type</a></li><li><a href="/en-US/docs/Web/CSS/:left">:left</a></li><li><a href="/en-US/docs/Web/CSS/:link">:link</a></li><li><a href="/en-US/docs/Web/CSS/:local-link">:local-link</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:modal">:modal</a></li><li><a href="/en-US/docs/Web/CSS/:muted">:muted</a></li><li><a href="/en-US/docs/Web/CSS/:not">:not()</a></li><li class="toggle"><details><summary>:nth-*</summary><ol><li><a href="/en-US/docs/Web/CSS/:nth-child">:nth-child()</a></li><li><a href="/en-US/docs/Web/CSS/:nth-last-child">:nth-last-child()</a></li><li><a href="/en-US/docs/Web/CSS/:nth-last-of-type">:nth-last-of-type()</a></li><li><a href="/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type()</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></li><li><a href="/en-US/docs/Web/CSS/:only-of-type">:only-of-type</a></li><li><a href="/en-US/docs/Web/CSS/:open">:open</a></li><li><a href="/en-US/docs/Web/CSS/:optional">:optional</a></li><li><a href="/en-US/docs/Web/CSS/:out-of-range">:out-of-range</a></li><li><a href="/en-US/docs/Web/CSS/:past">:past</a></li><li><a href="/en-US/docs/Web/CSS/:paused">:paused</a></li><li><a href="/en-US/docs/Web/CSS/:picture-in-picture">:picture-in-picture</a></li><li><a href="/en-US/docs/Web/CSS/:placeholder-shown">:placeholder-shown</a></li><li><a href="/en-US/docs/Web/CSS/:playing">:playing</a></li><li><a href="/en-US/docs/Web/CSS/:popover-open">:popover-open</a></li><li><a href="/en-US/docs/Web/CSS/:read-only">:read-only</a></li><li><a href="/en-US/docs/Web/CSS/:read-write">:read-write</a></li><li><a href="/en-US/docs/Web/CSS/:required">:required</a></li><li><a href="/en-US/docs/Web/CSS/:right">:right</a></li><li><a href="/en-US/docs/Web/CSS/:root">:root</a></li><li><a href="/en-US/docs/Web/CSS/:scope">:scope</a></li><li><a href="/en-US/docs/Web/CSS/:seeking">:seeking</a></li><li><a href="/en-US/docs/Web/CSS/:stalled">:stalled</a></li><li><a href="/en-US/docs/Web/CSS/:state">:state()</a></li><li><a href="/en-US/docs/Web/CSS/:target">:target</a></li><li><a href="/en-US/docs/Web/CSS/:target-within">:target-within</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:user-invalid">:user-invalid</a></li><li><a href="/en-US/docs/Web/CSS/:user-valid">:user-valid</a></li><li><a href="/en-US/docs/Web/CSS/:valid">:valid</a></li><li><a href="/en-US/docs/Web/CSS/:visited">:visited</a></li><li><a href="/en-US/docs/Web/CSS/:volume-locked">:volume-locked</a></li><li><a href="/en-US/docs/Web/CSS/:where">:where()</a></li></ol></details></li><li class="toggle"><details><summary>Pseudo-elements</summary><ol><li class="toggle"><details><summary>::-moz-*</summary><ol><li><a href="/en-US/docs/Web/CSS/::-moz-color-swatch">::-moz-color-swatch</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-list-bullet">::-moz-list-bullet</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-list-number">::-moz-list-number</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-meter-bar">::-moz-meter-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-progress-bar">::-moz-progress-bar</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-range-progress">::-moz-range-progress</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-range-thumb">::-moz-range-thumb</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-range-track">::-moz-range-track</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>::-webkit-*</summary><ol><li><a href="/en-US/docs/Web/CSS/::-webkit-inner-spin-button">::-webkit-inner-spin-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-bar">::-webkit-meter-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value">::-webkit-meter-even-less-good-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-inner-element">::-webkit-meter-inner-element</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-optimum-value">::-webkit-meter-optimum-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value">::-webkit-meter-suboptimum-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-progress-bar">::-webkit-progress-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-progress-inner-element">::-webkit-progress-inner-element</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-progress-value">::-webkit-progress-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-scrollbar">::-webkit-scrollbar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-search-cancel-button">::-webkit-search-cancel-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-search-results-button">::-webkit-search-results-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-slider-runnable-track">::-webkit-slider-runnable-track</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-slider-thumb">::-webkit-slider-thumb</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/::after">::after</a></li><li><a href="/en-US/docs/Web/CSS/::backdrop">::backdrop</a></li><li><a href="/en-US/docs/Web/CSS/::before">::before</a></li><li><a href="/en-US/docs/Web/CSS/::cue">::cue</a></li><li><a href="/en-US/docs/Web/CSS/::details-content">::details-content</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::file-selector-button">::file-selector-button</a></li><li><a href="/en-US/docs/Web/CSS/::first-letter">::first-letter</a></li><li><a href="/en-US/docs/Web/CSS/::first-line">::first-line</a></li><li><a href="/en-US/docs/Web/CSS/::grammar-error">::grammar-error</a></li><li><a href="/en-US/docs/Web/CSS/::highlight">::highlight()</a></li><li><a href="/en-US/docs/Web/CSS/::marker">::marker</a></li><li><a href="/en-US/docs/Web/CSS/::part">::part()</a></li><li><a href="/en-US/docs/Web/CSS/::placeholder">::placeholder</a></li><li><a href="/en-US/docs/Web/CSS/::selection">::selection</a></li><li><a href="/en-US/docs/Web/CSS/::slotted">::slotted()</a></li><li><a href="/en-US/docs/Web/CSS/::spelling-error">::spelling-error</a></li><li><a href="/en-US/docs/Web/CSS/::target-text">::target-text</a></li><li class="toggle"><details><summary>::view-*</summary><ol><li><a href="/en-US/docs/Web/CSS/::view-transition">::view-transition</a></li><li><a href="/en-US/docs/Web/CSS/::view-transition-group">::view-transition-group</a></li><li><a href="/en-US/docs/Web/CSS/::view-transition-image-pair">::view-transition-image-pair</a></li><li><a href="/en-US/docs/Web/CSS/::view-transition-new">::view-transition-new</a></li><li><a href="/en-US/docs/Web/CSS/::view-transition-old">::view-transition-old</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary>At-rules</summary><ol><li><a href="/en-US/docs/Web/CSS/@charset">@charset</a></li><li><a href="/en-US/docs/Web/CSS/@color-profile">@color-profile</a></li><li><a href="/en-US/docs/Web/CSS/@container">@container</a></li><li><a href="/en-US/docs/Web/CSS/@counter-style">@counter-style</a></li><li><a href="/en-US/docs/Web/CSS/@document">@document</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/@font-face">@font-face</a></li><li><a href="/en-US/docs/Web/CSS/@font-feature-values">@font-feature-values</a></li><li><a href="/en-US/docs/Web/CSS/@font-palette-values">@font-palette-values</a></li><li><a href="/en-US/docs/Web/CSS/@import">@import</a></li><li><a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a></li><li><a href="/en-US/docs/Web/CSS/@layer">@layer</a></li><li><a href="/en-US/docs/Web/CSS/@media">@media</a></li><li><a href="/en-US/docs/Web/CSS/@namespace">@namespace</a></li><li><a href="/en-US/docs/Web/CSS/@page">@page</a></li><li><a href="/en-US/docs/Web/CSS/@position-try">@position-try</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/@property">@property</a></li><li><a href="/en-US/docs/Web/CSS/@scope">@scope</a></li><li><a href="/en-US/docs/Web/CSS/@starting-style">@starting-style</a></li><li><a href="/en-US/docs/Web/CSS/@supports">@supports</a></li><li><a href="/en-US/docs/Web/CSS/@view-transition">@view-transition</a></li></ol></details></li><li class="toggle"><details><summary>Functions</summary><ol><li><a href="/en-US/docs/Web/CSS/-moz-image-rect">-moz-image-rect</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/abs">abs()</a></li><li><a href="/en-US/docs/Web/CSS/acos">acos()</a></li><li><a href="/en-US/docs/Web/CSS/anchor-size">anchor-size()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/anchor">anchor()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/asin">asin()</a></li><li><a href="/en-US/docs/Web/CSS/atan">atan()</a></li><li><a href="/en-US/docs/Web/CSS/atan2">atan2()</a></li><li><a href="/en-US/docs/Web/CSS/attr">attr()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/blur">blur()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></li><li><a href="/en-US/docs/Web/CSS/calc-size">calc-size()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/calc">calc()</a></li><li><a href="/en-US/docs/Web/CSS/basic-shape/circle">circle()</a></li><li><a href="/en-US/docs/Web/CSS/clamp">clamp()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/color-mix">color-mix()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/color">color()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/conic-gradient">conic-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></li><li><a href="/en-US/docs/Web/CSS/cos">cos()</a></li><li><a href="/en-US/docs/Web/CSS/counter">counter()</a></li><li><a href="/en-US/docs/Web/CSS/counters">counters()</a></li><li><a href="/en-US/docs/Web/CSS/cross-fade">cross-fade()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/cubic-bezier">cubic-bezier()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/device-cmyk">device-cmyk()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></li><li><a href="/en-US/docs/Web/CSS/element">element()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/basic-shape/ellipse">ellipse()</a></li><li><a href="/en-US/docs/Web/CSS/env">env()</a></li><li><a href="/en-US/docs/Web/CSS/exp">exp()</a></li><li><a href="/en-US/docs/Web/CSS/fit-content_function">fit-content()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/hsl">hsl()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/hwb">hwb()</a></li><li><a href="/en-US/docs/Web/CSS/hypot">hypot()</a></li><li><a href="/en-US/docs/Web/CSS/image/image-set">image-set()</a></li><li><a href="/en-US/docs/Web/CSS/image/image">image()</a></li><li><a href="/en-US/docs/Web/CSS/basic-shape/inset">inset()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/invert">invert()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/lab">lab()</a></li><li><a href="/en-US/docs/Web/CSS/@import/layer_function">layer()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/lch">lch()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/light-dark">light-dark()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/linear-gradient">linear-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/linear">linear()</a></li><li><a href="/en-US/docs/Web/CSS/log">log()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></li><li><a href="/en-US/docs/Web/CSS/max">max()</a></li><li><a href="/en-US/docs/Web/CSS/min">min()</a></li><li><a href="/en-US/docs/Web/CSS/minmax">minmax()</a></li><li><a href="/en-US/docs/Web/CSS/mod">mod()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/oklab">oklab()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/oklch">oklch()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></li><li><a href="/en-US/docs/Web/CSS/image/paint">paint()</a></li><li><a href="/en-US/docs/Web/CSS/font-palette/palette-mix">palette-mix()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/basic-shape/path">path()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></li><li><a href="/en-US/docs/Web/CSS/basic-shape/polygon">polygon()</a></li><li><a href="/en-US/docs/Web/CSS/pow">pow()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/radial-gradient">radial-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/ray">ray()</a></li><li><a href="/en-US/docs/Web/CSS/basic-shape/rect">rect()</a></li><li><a href="/en-US/docs/Web/CSS/rem">rem()</a></li><li><a href="/en-US/docs/Web/CSS/repeat">repeat()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient">repeating-conic-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/repeating-linear-gradient">repeating-linear-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/repeating-radial-gradient">repeating-radial-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/rgb">rgb()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></li><li><a href="/en-US/docs/Web/CSS/round">round()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></li><li><a href="/en-US/docs/Web/CSS/animation-timeline/scroll">scroll()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></li><li><a href="/en-US/docs/Web/CSS/basic-shape/shape">shape()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/sign">sign()</a></li><li><a href="/en-US/docs/Web/CSS/sin">sin()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></li><li><a href="/en-US/docs/Web/CSS/sqrt">sqrt()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/steps">steps()</a></li><li><a href="/en-US/docs/Web/CSS/symbols">symbols()</a></li><li><a href="/en-US/docs/Web/CSS/tan">tan()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></li><li><a href="/en-US/docs/Web/CSS/url_function">url()</a></li><li><a href="/en-US/docs/Web/CSS/var">var()</a></li><li><a href="/en-US/docs/Web/CSS/animation-timeline/view">view()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/basic-shape/xywh">xywh()</a></li></ol></details></li><li class="toggle"><details><summary>Types</summary><ol><li><a href="/en-US/docs/Web/CSS/absolute-size"><absolute-size></a></li><li><a href="/en-US/docs/Web/CSS/alpha-value"><alpha-value></a></li><li><a href="/en-US/docs/Web/CSS/angle-percentage"><angle-percentage></a></li><li><a href="/en-US/docs/Web/CSS/angle"><angle></a></li><li><a href="/en-US/docs/Web/CSS/baseline-position"><baseline-position></a></li><li><a href="/en-US/docs/Web/CSS/basic-shape"><basic-shape></a></li><li><a href="/en-US/docs/Web/CSS/blend-mode"><blend-mode></a></li><li><a href="/en-US/docs/Web/CSS/box-edge"><box-edge></a></li><li><a href="/en-US/docs/Web/CSS/calc-keyword"><calc-keyword></a></li><li><a href="/en-US/docs/Web/CSS/calc-sum"><calc-sum></a></li><li><a href="/en-US/docs/Web/CSS/color-interpolation-method"><color-interpolation-method></a></li><li><a href="/en-US/docs/Web/CSS/color_value"><color></a></li><li><a href="/en-US/docs/Web/CSS/content-distribution"><content-distribution></a></li><li><a href="/en-US/docs/Web/CSS/content-position"><content-position></a></li><li><a href="/en-US/docs/Web/CSS/custom-ident"><custom-ident></a></li><li><a href="/en-US/docs/Web/CSS/dashed-ident"><dashed-ident></a></li><li><a href="/en-US/docs/Web/CSS/dimension"><dimension></a></li><li><a href="/en-US/docs/Web/CSS/display-box"><display-box></a></li><li><a href="/en-US/docs/Web/CSS/display-inside"><display-inside></a></li><li><a href="/en-US/docs/Web/CSS/display-internal"><display-internal></a></li><li><a href="/en-US/docs/Web/CSS/display-legacy"><display-legacy></a></li><li><a href="/en-US/docs/Web/CSS/display-listitem"><display-listitem></a></li><li><a href="/en-US/docs/Web/CSS/display-outside"><display-outside></a></li><li><a href="/en-US/docs/Web/CSS/easing-function"><easing-function></a></li><li><a href="/en-US/docs/Web/CSS/filter-function"><filter-function></a></li><li><a href="/en-US/docs/Web/CSS/flex_value"><flex></a></li><li><a href="/en-US/docs/Web/CSS/frequency-percentage"><frequency-percentage></a></li><li><a href="/en-US/docs/Web/CSS/frequency"><frequency></a></li><li><a href="/en-US/docs/Web/CSS/generic-family"><generic-family></a></li><li><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></li><li><a href="/en-US/docs/Web/CSS/hex-color"><hex-color></a></li><li><a href="/en-US/docs/Web/CSS/hue-interpolation-method"><hue-interpolation-method></a></li><li><a href="/en-US/docs/Web/CSS/hue"><hue></a></li><li><a href="/en-US/docs/Web/CSS/ident"><ident></a></li><li><a href="/en-US/docs/Web/CSS/image"><image></a></li><li><a href="/en-US/docs/Web/CSS/integer"><integer></a></li><li><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></li><li><a href="/en-US/docs/Web/CSS/length"><length></a></li><li><a href="/en-US/docs/Web/CSS/line-style"><line-style></a></li><li><a href="/en-US/docs/Web/CSS/named-color"><named-color></a></li><li><a href="/en-US/docs/Web/CSS/number"><number></a></li><li><a href="/en-US/docs/Web/CSS/overflow-position"><overflow-position></a></li><li><a href="/en-US/docs/Web/CSS/overflow_value"><overflow></a></li><li><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></li><li><a href="/en-US/docs/Web/CSS/position-area_value"><position-area></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position_value"><position></a></li><li><a href="/en-US/docs/Web/CSS/ratio"><ratio></a></li><li><a href="/en-US/docs/Web/CSS/relative-size"><relative-size></a></li><li><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></li><li><a href="/en-US/docs/Web/CSS/self-position"><self-position></a></li><li><a href="/en-US/docs/Web/CSS/shape"><shape></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/string"><string></a></li><li><a href="/en-US/docs/Web/CSS/system-color"><system-color></a></li><li><a href="/en-US/docs/Web/CSS/time-percentage"><time-percentage></a></li><li><a href="/en-US/docs/Web/CSS/time"><time></a></li><li><a href="/en-US/docs/Web/CSS/transform-function"><transform-function></a></li><li><a href="/en-US/docs/Web/CSS/url_value"><url></a></li></ol></details></li><li class="section"><a href="/en-US/docs/Web/CSS/Guides">Guides</a></li><li class="toggle"><details><summary>Animations</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations">Using CSS animations</a></li></ol></details></li><li class="toggle"><details><summary>Backgrounds and Borders</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images">Resizing background images</a></li></ol></details></li><li class="toggle"><details><summary>Box alignment</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables">Box alignment in block layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox">Box alignment in flexbox</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout">Box alignment in grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout">Box alignment in multi-column layout</a></li></ol></details></li><li class="toggle"><details><summary>Box model</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model">Introduction to the CSS basic box model</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing">Mastering margin collapsing</a></li></ol></details></li><li class="toggle"><details open=""><summary>Colors</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_colors/Applying_color">Applying_color_to_HTML_elements</a></li><li><em><a href="/en-US/docs/Web/CSS/CSS_colors/Color_values" aria-current="page">Color values</a></em></li><li><a href="/en-US/docs/Web/CSS/CSS_colors/Relative_colors">Using relative colors</a></li><li><a href="/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely">Using color wisely</a></li><li><a href="/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance">Accessibility_Understanding_colors_and_luminance</a></li><li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Accessibility: Color contrast</a></li></ol></details></li><li class="toggle"><details><summary>Columns</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts">Basic concepts of multi-column layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns">Styling columns</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns">Spanning and balancing columns</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout">Handling overflow in multi-column layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout">Handling content breaks in multi-column layout</a></li></ol></details></li><li class="toggle"><details><summary>Conditional rules</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries">Using feature queries</a></li></ol></details></li><li class="toggle"><details><summary>Containment</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment">Using CSS containment</a></li><li><a href="/en-US/docs/Web/CSS/CSS_containment/Container_queries">CSS container queries</a></li><li><a href="/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries">Using container size and style queries</a></li></ol></details></li><li class="toggle"><details><summary>CSSOM view</summary><ol><li><a href="/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems">Coordinate systems</a></li></ol></details></li><li class="toggle"><details><summary>Display</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow">Block and inline layout in normal flow</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow">In flow and out of flow</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts">Introduction to formatting contexts</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes">Flow layout and writing modes</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow">Flow layout and overflow</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display">Using the multi-keyword syntax with CSS display</a></li></ol></details></li><li class="toggle"><details><summary>Flexbox</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox">Basic concepts of flexbox</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods">Relationship of flexbox to other layout methods</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container">Aligning items in a flex container</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items">Ordering flex items</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis">Controlling ratios of flex items along the main axis</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items">Mastering wrapping of flex items</a></li><li><a href="/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox">Typical use cases of flexbox</a></li></ol></details></li><li class="toggle"><details><summary>Fonts</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide">OpenType font features guide</a></li><li><a href="/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide">Variable fonts guide</a></li></ol></details></li><li class="toggle"><details><summary>Grid</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">Basic concepts of grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods">Relationship of grid layout to other layout methods</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement">Grid layout using line-based placement</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas">Grid template areas</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines">Layout using named grid lines</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout">Auto-placement in grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout">Aligning items in CSS grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes">Grids, logical values, and writing modes</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility">Grid layout and accessibility</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids">Realizing common layouts using grids</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>Images</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients">Using CSS gradients</a></li></ol></details></li><li class="toggle"><details><summary>Lists and counters</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">Using CSS counters</a></li><li><a href="/en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation">Consistent list indentation</a></li></ol></details></li><li class="toggle"><details><summary>Logical properties</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values">Basic concepts of logical properties and values</a></li><li><a href="/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning">Logical properties for floating and positioning</a></li><li><a href="/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding">Logical properties for margins, borders, and padding</a></li><li><a href="/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Sizing">Logical properties for sizing</a></li></ol></details></li><li class="toggle"><details><summary>Math functions</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions">Using CSS math functions</a></li></ol></details></li><li class="toggle"><details><summary>Media queries</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">Using media queries</a></li><li><a href="/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility">Using media queries for accessibility</a></li><li><a href="/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries">Testing media queries programmatically</a></li><li><a href="/en-US/docs/Web/CSS/CSS_media_queries/Printing">Printing</a></li></ol></details></li><li class="toggle"><details><summary>Nesting style rules</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting">Using CSS nesting</a></li><li><a href="/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules">CSS nesting at-rules</a></li><li><a href="/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity">CSS nesting and specificity</a></li></ol></details></li><li class="toggle"><details><summary>Positioning</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index">Understanding z-index</a></li></ol></details></li><li class="toggle"><details><summary>Scroll snap</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts">Basic concepts of scroll snap</a></li></ol></details></li><li class="toggle"><details><summary>Shapes</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes">Overview of shapes</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes/From_box_values">Shapes from box values</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes">Basic shapes with shape-outside</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images">Shapes from images</a></li></ol></details></li><li class="toggle"><details><summary>Text</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text">Wrapping and breaking text</a></li></ol></details></li><li class="toggle"><details><summary>Transforms</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms">Using CSS transforms</a></li></ol></details></li><li class="toggle"><details><summary>Transitions</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions">Using CSS transitions</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Layout cookbook</a></li><li class="toggle"><ol><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Recipe: Media objects</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Column layouts</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></li></ol></li><li class="section">Tools</li><li class="toggle"><ol><li><a href="/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool">Color picker tool</a></li><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator">Box-shadow generator</a></li><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator">Border-image generator</a></li><li><a href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator">Border-radius generator</a></li></ol></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#keywords">Keywords</a></li><li class="document-toc-item "><a class="document-toc-link" href="#rgb_values">RGB values</a></li><li class="document-toc-item "><a class="document-toc-link" href="#color_functions_with_a_hue_component">Color functions with a hue component</a></li><li class="document-toc-item "><a class="document-toc-link" href="#lab_and_oklab">Lab and OKLab</a></li><li class="document-toc-item "><a class="document-toc-link" href="#additional_color_functional_notations">Additional color functional notations</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="en-US"><header><h1>CSS color values</h1></header><div class="section-content"><p>To represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking the color down into components, such as amounts of different primary colors to mix together, or brightness and hue. Defined color models ensure that colors will appear the same no matter where they are rendered.</p> <p>A color model is a mathematical model that represents colors using numeric values. Color models describe how to create the available colors within a color space. <a href="/en-US/docs/Glossary/RGB">RGB</a> was the first color model for the web. The <code>sRGB</code> color space of the RGB color model — the standard red, green, and blue color space — was created in 1996 for computer monitors and the web. A <a href="/en-US/docs/Glossary/Color_space">color space</a> is a system for grouping colors so that describing any given color is consistent. If you transform a color between two different color spaces, it should look identical in both.</p> <p>Originally, monitors were limited regarding how many colors they could render, and CSS colors were limited by those constraints, expanding as capabilities improved. With modern devices no longer limited to RGB, we now also have color models based on human perception instead, providing a much wider <a href="/en-US/docs/Glossary/Gamut">gamut</a> of colors. We can now describe color in CSS in several ways, and the options keep expanding.</p> <p>This guide introduces the different <a href="/en-US/docs/Web/CSS/color_value"><code><color></code></a> value types. For a more detailed discussion, see the reference links provided below.</p></div><section aria-labelledby="keywords"><h2 id="keywords"><a href="#keywords">Keywords</a></h2><div class="section-content"><p>The web defines a set of standard color names that lets you use keywords instead of numeric representations to describe colors. This is a simpler albeit more limited approach — there may not be a keyword representing the exact color you want to use.</p> <p>Color keywords include standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors, including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>. Named colors use the <a href="/en-US/docs/Glossary/RGB">RGB</a> model and are associated with the sRGB (<code>srgb</code>) color space.</p> <p>There are over 160 named colors. There are named colors of special interest: <a href="/en-US/docs/Web/CSS/named-color#transparent"><code>transparent</code></a> sets a transparent color value, while <a href="/en-US/docs/Web/CSS/color_value#currentcolor_keyword"><code>currentcolor</code></a> sets the current value of the CSS <a href="/en-US/docs/Web/CSS/color"><code>color</code></a> property. There are also named <a href="/en-US/docs/Web/CSS/system-color"><code><system-color></code></a> colors, such as <code>accentcolortext</code> and <code>buttonface</code>, that reflect the default color choices made by the user, the browser, or the operating system.</p> <p>All color keywords are case-insensitive. See the <a href="/en-US/docs/Web/CSS/named-color"><code><named-color></code></a> data type for more information on color keywords.</p></div></section><section aria-labelledby="rgb_values"><h2 id="rgb_values"><a href="#rgb_values">RGB values</a></h2><div class="section-content"><p>There are two primary ways of defining an <a href="/en-US/docs/Glossary/RGB">RGB</a> color by its red, green, and blue components in CSS — hexadecimal and <code>rgb()</code> values. Like named colors, these methods use the <a href="/en-US/docs/Glossary/RGB">RGB</a> model and are associated with the sRGB (<code>srgb</code>) color space. However, they allow a much wider range of colors to be specified.</p></div></section><section aria-labelledby="hexadecimal_string_notation"><h3 id="hexadecimal_string_notation"><a href="#hexadecimal_string_notation">Hexadecimal string notation</a></h3><div class="section-content"><p>Hexadecimal (hex) string notation uses a hexadecimal value to represent each component (red, green, and blue) of an RGB color. It may also include a fourth component: the alpha channel (or opacity).</p> <p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that comes the hexadecimal digits of the color code. The string is case-insensitive.</p> <dl> <dt id="rrggbb"><a href="#rrggbb"><code>"#rrggbb"</code></a></dt> <dd> <p>Specifies a fully opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</p> </dd> <dt id="rrggbbaa"><a href="#rrggbbaa"><code>"#rrggbbaa"</code></a></dt> <dd> <p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</p> </dd> <dt id="rgb"><a href="#rgb"><code>"#rgb"</code></a></dt> <dd> <p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</p> </dd> <dt id="rgba"><a href="#rgba"><code>"#rgba"</code></a></dt> <dd> <p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</p> </dd> </dl> <p>As shown above, the red, green, and blue color components can each be represented as a double-digit hex value representing a number between 0 (<code>00</code>) and 255 (<code>FF</code>) or a single-digit hex value (a number between 0 (<code>0</code>) and 15 (<code>F</code>).</p> <div class="notecard note"> <p><strong>Note:</strong> The leading <code>0x</code> in the values above indicates a hexadecimal integer literal. Hexadecimal integers can include digits (<code>0</code> - <code>9</code>) and the letters <code>a</code> – <code>f</code> and <code>A</code> – <code>F</code>. The case of a character does not change its value. Therefore: <code>0xa</code> = <code>0xA</code> = <code>10</code> and <code>0xf</code> = <code>0xF</code> = <code>15</code>.</p> </div> <p>These two hex colors are equivalent color values; they're both red:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>color: #ff0000; color: #f00; </code></pre></div> <p>All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> <p>To make the values 25% opaque, add in the alpha channel value as shown below:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>color: #ff000044; color: #f004; </code></pre></div> <p>See the <a href="/en-US/docs/Web/CSS/hex-color"><code><hex-color></code></a> data type for more information on hexadecimal string notation for colors.</p> <h4 id="html_color_input_type">HTML color input type</h4> <p>There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. For such use cases, the <a href="/en-US/docs/Web/HTML/Element/input"><code><input></code></a> element has a <code>"color"</code> <a href="/en-US/docs/Web/HTML/Element/input#type"><code>type</code></a>, which renders a color picker control.</p> <p>This example allows you to choose a color. Once a choice is made, the <a href="/en-US/docs/Web/CSS/border-color"><code>border-color</code></a> is set to that color, and the value is displayed.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div id="box"> <label for="colorPicker">Border color:</label> <input type="color" value="#8888ff" id="colorPicker" /> <output></output> </div> </code></pre></div> <p>The HTML creates a box containing a color picker control (with a label created using the <a href="/en-US/docs/Web/HTML/Element/label"><code><label></code></a> element) and an empty <a href="/en-US/docs/Web/HTML/Element/output"><code><output></code></a> element into which we'll output the color's value using JavaScript. The color input's value is always a hexadecimal string.</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="HTML color input type sample" id="frame_html_color_input_type" width="525" height="120" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="html_color_input_type" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>#box { width: 500px; height: 100px; border: 5px solid rgb(245 220 225); padding: 4px 6px; font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"; } </code></pre></div> <p>The following JavaScript updates the border's color to match the color picker's initial value, then adds two event handlers to the <a href="/en-US/docs/Web/HTML/Element/input/color"><code><input type="color"></code></a> element to respond to changes made to its value.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const colorPicker = document.querySelector("#colorPicker"); const box = document.querySelector("#box"); const output = document.querySelector("output"); box.style.borderColor = colorPicker.value; colorPicker.addEventListener( "input", (event) => { box.style.borderColor = event.target.value; }, false, ); colorPicker.addEventListener( "change", (event) => { output.innerText = `${colorPicker.value}`; }, false, ); </code></pre></div> <p>The <a href="/en-US/docs/Web/API/Element/input_event" title="input"><code>input</code></a> event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> <p>The <a href="/en-US/docs/Web/API/HTMLElement/change_event" title="change"><code>change</code></a> event is received when the color picker's value is finalized. We respond by setting the contents of the <code><output></code> to the string value of the selected color.</p></div></section><section aria-labelledby="rgb_functional_notation"><h3 id="rgb_functional_notation"><a href="#rgb_functional_notation">RGB functional notation</a></h3><div class="section-content"><p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (and, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function <a href="/en-US/docs/Web/CSS/color_value/rgb"><code>rgb()</code></a>. This function accepts 3 or 4 input parameters — red, green, and blue component values and an optional alpha channel value.</p> <p>Legal values for each of these parameters are:</p> <dl> <dt id="red"><a href="#red"><code>red</code>, <code>green</code>, and <code>blue</code></a></dt> <dd> <p>Each must be an <a href="/en-US/docs/Web/CSS/number"><code><number></code></a> value between 0 and 255 (inclusive), a <a href="/en-US/docs/Web/CSS/percentage"><code><percentage></code></a> from 0% to 100%, or the keyword <code>none</code>, which is equal to <code>0</code> in this case.</p> </dd> <dt id="alpha"><a href="#alpha"><code>alpha</code></a></dt> <dd> <p>The alpha channel is specified as a percentage between <code>0%</code> (fully transparent) and <code>100%</code> (fully opaque), or a number between <code>0.0</code> (equivalent to <code>0%</code>) and <code>1.0</code> (equivalent to <code>100%</code>).</p> </dd> </dl> <p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255 0 0 / 50%)</code> or <code>rgb(100% 0 0 / 0.5)</code>.</p> <p>See the <a href="/en-US/docs/Web/CSS/color_value/rgb"><code>rgb()</code></a> color function for more information on the RGB functional notation.</p></div></section><section aria-labelledby="color_functions_with_a_hue_component"><h2 id="color_functions_with_a_hue_component"><a href="#color_functions_with_a_hue_component">Color functions with a hue component</a></h2><div class="section-content"><p>The color functions that have a <a href="/en-US/docs/Web/CSS/hue"><code><hue></code></a> component — an <a href="/en-US/docs/Web/CSS/angle"><code><angle></code></a> from that color model's <a href="/en-US/docs/Glossary/Color_wheel">color wheel</a> — include the <code>srgb</code> color functions <code>hsl()</code> and <code>hwb()</code>, CIElab's <code>lch()</code> function, and OKLab's <code>oklch()</code> color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc.</p></div></section><section aria-labelledby="hsl_functional_notation"><h3 id="hsl_functional_notation"><a href="#hsl_functional_notation">HSL functional notation</a></h3><div class="section-content"><p>The <code>hsl()</code> CSS color function was the first hue-based color function to be supported in browsers. <code>hsl()</code> is more intuitive than <code>rgb()</code> — it is easier to determine the effect of varying hue (<code>h</code>), saturation (<code>s</code>), and lightness (<code>l</code>) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported.</p> <p>The <code>hsl()</code> and <code>hwb()</code> sRGB color functions are both cylindrical. Hue defines the color as an <a href="/en-US/docs/Web/CSS/angle"><code><angle></code></a> on a circular <a href="/en-US/docs/Glossary/Color_wheel">color wheel</a>. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. As the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white).</p> <p><img src="/en-US/docs/Web/CSS/CSS_colors/Color_values/640px-hsl_color_solid_cylinder.png" alt="HSL color cylinder" width="640" height="480" loading="lazy"></p> <p>Image courtesy of user <a href="https://commons.wikimedia.org/wiki/User:SharkD" class="external" target="_blank">SharkD</a> on <a href="https://en.wikipedia.org/" class="external" target="_blank">Wikipedia</a>, distributed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" class="external" target="_blank">CC BY-SA 3.0</a> license.</p> <p>The value of the hue (<code>H</code>) component of an HSL (or HWB) color is an angle that starts at 0° as red, then moves through yellow, green, cyan, blue, and magenta, before ending up back at red again at 360°. The value can be specified in any <a href="/en-US/docs/Web/CSS/angle"><code><angle></code></a> unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). The hue value identifies what the base shade of the color is, but it doesn't control how vivid or dull, or how light or dark the color is.</p> <p>The saturation (<code>S</code>) component of the color specifies the percentage of the final color comprised of the specified hue, with 100% being fully saturated and 0% being a complete lack of color (greyscale). The lightness (<code>L</code>) component specifies how light the color is along a sliding scale between completely black (<code>0%</code>) and completely white (<code>100%</code>). You can also optionally include an alpha channel, preceded by a slash (<code>/</code>) to make the color less than 100% opaque.</p> <p>Here are some sample colors in HSL notation:</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding: 4px 6px; text-align: left; } th { background-color: hsl(0 0% 75%); } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><table> <thead> <tr> <th scope="col">Color in HSL notation</th> <th scope="col">Example</th> </tr> </thead> <tbody> <tr> <td><code>hsl(90deg 0% 50%)</code></td> <td style="background-color: hsl(90deg 0% 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(90 100% 50%)</code></td> <td style="background-color: hsl(90 100% 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn 50% 75%)</code></td> <td style="background-color: hsl(0.15turn 50% 75%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn 90% 75%)</code></td> <td style="background-color: hsl(0.15turn 90% 75%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn 90% 50%)</code></td> <td style="background-color: hsl(0.15turn 90% 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(270deg 90% 50% / 50%)</code></td> <td style="background-color: hsl(270deg 90% 50% / 50%);">&nbsp;</td> </tr> </tbody> </table> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="HSL functional notation sample" id="frame_hsl_functional_notation" width="300" height="200" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="hsl_functional_notation" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>The last value is semi-opaque; it includes the optional alpha value, preceded by a forward slash.</p> <div class="notecard note"> <p><strong>Note:</strong> When you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> </div></div></section><section aria-labelledby="hwb_functional_notation"><h3 id="hwb_functional_notation"><a href="#hwb_functional_notation">HWB functional notation</a></h3><div class="section-content"><p>The <a href="/en-US/docs/Web/CSS/color_value/hwb"><code>hwb()</code></a> color function uses the same hue coordinate system as <code>hsl()</code>, with <code>0deg</code> being red. However, instead of <code>hsl()</code>'s lightness and saturation, <code>hwb()</code> functions specify whiteness (<code>W</code>) and blackness (<code>B</code>). This function is also fairly intuitive — allowing you to pick a hue and then mix in amounts of white and or black to achieve the desired color.</p> <p><code>W</code> and <code>B</code> values range from <code>0%</code> to <code>100%</code> (or <code>0</code> to <code>1</code>). If the combined value of <code>W</code> and <code>B</code> is 100% (or <code>1</code>) or greater, the color will be grey, similar to setting the <code>s</code> to <code>0%</code> with <code>hsl()</code>. As with <code>hsl()</code>, an optional alpha value can be included, preceded by a forward slash <code>/</code>.</p> <p>Here are some examples of using HWB notation:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* These examples all specify varying shades of a lime green. */ hwb(90 10% 10%) hwb(90 50% 10%) hwb(90deg 10% 10%) hwb(1.5708rad 60% 0%) hwb(.25turn 0% 40%) /* Same lime green but with an alpha value */ hwb(90 10% 10% / 0.5) hwb(90 10% 10% / 50%) </code></pre></div> <p>In the below examples, we set the same hues as in the <code>hsl()</code> examples, but we are adding whiteness and blackness to each hue via <code>hwb()</code> instead of saturation and lightness:</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>{/*end the bad selector*/} table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding: 4px 6px; text-align: left; } th { background-color: hwb(0 75% 25%); } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><table> <thead> <tr> <th scope="col">Color in HWB notation</th> <th scope="col">Example</th> </tr> </thead> <tbody> <tr> <td><code>hwb(90deg 50% 50%)</code></td> <td style="background-color: hwb(90deg 50% 50%);">&nbsp;</td> </tr> <tr> <td><code>hwb(90 0% 0%)</code></td> <td style="background-color: hwb(90 0% 0%);">&nbsp;</td> </tr> <tr> <td><code>hwb(0.15turn 25% 0%)</code></td> <td style="background-color: hwb(0.15turn 25% 0%);">&nbsp;</td> </tr> <tr> <td><code>hwb(0.15turn 10% 25%)</code></td> <td style="background-color: hwb(0.15turn 10% 25%);">&nbsp;</td> </tr> <tr> <td><code>hwb(1turn 10% 65%)</code></td> <td style="background-color: hwb(1turn 10% 65%);">&nbsp;</td> </tr> <tr> <td><code>hwb(270deg 75% 10%)</code></td> <td style="background-color: hwb(270deg 75% 10%);">&nbsp;</td> </tr> </tbody> </table> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="HWB functional notation sample" id="frame_hwb_functional_notation" width="300" height="200" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="hwb_functional_notation" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="lch_and_oklch_cielab_and_oklab_color_spaces"><h3 id="lch_and_oklch_cielab_and_oklab_color_spaces"><a href="#lch_and_oklch_cielab_and_oklab_color_spaces">LCH and OKLCH: CIELAB and Oklab color spaces</a></h3><div class="section-content"><p>While <code>hsl()</code> and <code>hwb()</code> are intuitive, they have a major drawback. With these functions, every fully-saturated hue angle (<code>hsl(<angle> 100% 50%)</code> or <code>hwb(<angle> 0% 0%)</code>) has the same lightness, but that is not how human vision or monitors work. Putting white text on fully saturated blue (<code>hsl(240deg 100% 50%)</code>) is legible, but that same text on fully saturated yellow (<code>hsl(60deg 100% 50%)</code>) will not only be illegible, but may hurt your user's eyes. In these color functions, the lightness of a color is relative to other colors, not to human perception. In reality, not all hues have the same max saturation.</p> <p>Wouldn't it be fantastic if you could simply change the hue channel of a color on a site without making text illegible? You can with color functions in the CIELAB and Oklab color spaces.</p> <p>The CIELAB and Oklab color spaces represent the entire range of colors that humans can see. CIE lab color functions include <a href="/en-US/docs/Web/CSS/color_value/lch"><code>lch()</code></a> and <a href="/en-US/docs/Web/CSS/color_value/lab"><code>lab()</code></a>. Oklab color functions include <a href="/en-US/docs/Web/CSS/color_value/oklch"><code>oklch()</code></a> and <a href="/en-US/docs/Web/CSS/color_value/oklab"><code>oklab()</code></a>. The primary purpose of these models is that they are uniform so that a given distance between any two points in the color space should appear equally different to a viewer. Oklab is a color space that uses the same model type as CIELAB but is built using additional numerical optimization steps, so the values are considered more accurate than CIELAB. Because of this optimization, hues are more perceptually uniform.</p> <p>The <code>lch()</code> and <code>oklch()</code> functions use lightness (<code>L</code>), chroma (<code>C</code>), and hue (<code>H</code>), and are discussed further in this section. The <a href="#lab_and_oklab"><code>lab()</code> and <code>oklab()</code></a> functions work differently, using lightness (<code>L</code>), red/green-ness (along the <code>a</code>-axis), and yellow/blue-ness (along the <code>b</code>-axis). These axes are referred to as rectangular coordinates. The main benefit of these color functions is that the "lightness" is perceived lightness; it is the brightness of a color as perceived by the human eye rather than the lightness as compared to other colors.</p> <p>Similar to the sRGB hue color functions, the hue (<code>h</code>) value in <code>lch()</code> and <code>oklch()</code> is a number, an angle, or the keyword <code>none</code> (equivalent to <code>0deg</code>) representing the color's <code><hue></code> angle. However, the colors at each angle value are not the same. The angles corresponding to particular hues differ across the sRGB, CIELAB (used by <code>lch()</code>), and Oklab (used by <code>oklch()</code>) color spaces.</p> <p>The following gradients demonstrate the hue colors at every angle form <code>0deg</code> to <code>360deg</code> in the sRGB, CIE Lab, and OKlab color spaces:</p> <div class="code-example"><pre class="brush: html hidden live-sample___hues notranslate"><code><p>sRGB (`hsl()` and `hwb()`)</p> <div id="srgb"></div> <p>CIE Lab (`lch()`)</p> <div id="lch"></div> <p>OKLab (`oklch()`)</p> <div id="oklch"></div> <p> <label><input type="checkbox" /> Toggle greyscale</label> </p> </code></pre></div> <div class="code-example"><pre class="brush: css hidden live-sample___hues notranslate"><code>div:has(~ p input:checked) { filter: grayscale(100%); } p { margin: 0; } div { height: 50px; margin-bottom: 10px; } #srgb { background: linear-gradient( to right, hsl(0deg 100% 50%), hsl(90deg 100% 50%), hsl(180deg 100% 50%), hsl(270deg 100% 50%), hsl(360deg 100% 50%) ); } #lch { background: linear-gradient( to right, lch(50% 100% 0deg), lch(50% 100% 90deg), lch(50% 100% 180deg), lch(50% 100% 270deg), lch(50% 100% 360deg) ); } #oklch { background: linear-gradient( to right, oklch(50% 100% 0deg), oklch(50% 100% 90deg), oklch(50% 100% 180deg), oklch(50% 100% 270deg), oklch(50% 100% 360deg) ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="hues sample" id="frame_hues" width="100" height="260" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="hues" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>You may notice how the brightness of the latter gradients is more even across the spectrum of hues than the sRGB gradient. Select the checkbox in the example above to convert the hue gradient to greyscale to make this more apparent.</p> <p>Note also how the spread of blue values in CIE Lab is longer than in the other two. This is the difference between <code>lch()</code> and <code>oklch()</code>. The <code>lch()</code> blue spread is due to a bug that shifts the chroma and lightness of hue values between <code>270deg</code> and <code>330deg</code>. This was resolved in the oklab color space and therefore the <code>oklch()</code> color notation.</p> <p>As discussed above, the hue (<code>H</code>) in the <code>lch()</code> and <code>oklch()</code> is an <code><angle></code>, <code>number</code> or the keyword <code>none</code>. The <code>lightness</code> is either a <a href="/en-US/docs/Web/CSS/percentage"><code><percentage></code></a> or for <code>lch()</code> a number between <code>0</code> and <code>100</code> and for <code>oklch()</code> a number between <code>0</code> and <code>1</code>, with <code>0</code> or <code>0%</code> being the complete lack of lightness, which is black.</p> <p>The <code>C</code> is a <code><number></code>, <code><percentage></code>, or the keyword <code>none</code> (equivalent to <code>0%</code>) is the color's chroma, or the "amount of color". This is similar to the <code>S</code> saturation value of the <code>hsl()</code> color function. The value <code>0</code> is the complete lack of chroma or saturation; resulting in a grey between white and black inclusive, depending on the lightness value. The number values are theoretically unbounded, with <code>100%</code> being equal to <code>150</code> for <code>lch()</code> and <code>0.4</code> with <code>oklch()</code>.</p> <p>Like the other color functions, there is also an optional alpha transparency value, preceded by a slash (<code>/</code>).</p> <p>The example below shows the effect of changing the lightness value in the <code>lch()</code> and <code>oklch()</code> functions.</p> <div class="code-example"><pre class="brush: css hidden live-sample___lch-colors notranslate"><code>/* Varying shades of pink */ .container { display: grid; font-family: sans-serif; font-size: 14px; color: white; grid-template-columns: repeat(6, 1fr); gap: 4px; } [id$="99"], [id$="90"], [id$="80"] { color: lch(1% 40 0deg); } .container div { border-radius: 8px; padding: 8px 4px; } #lch-1 { background-color: lch(1% 40 0deg); } #lch-10 { background-color: lch(10% 40 0deg); } #lch-20 { background-color: lch(20% 40 0deg); } #lch-30 { background-color: lch(30% 40 0deg); } #lch-40 { background-color: lch(40% 40 0deg); } #lch-50 { background-color: lch(50% 40 0deg); } #lch-60 { background-color: lch(60% 40 0deg); } #lch-70 { background-color: lch(70% 40 0deg); } #lch-80 { background-color: lch(80% 40 0deg); } #lch-90 { background-color: lch(90% 40 0deg); } #lch-99 { background-color: lch(99% 40 0deg); } #oklch-1 { background-color: oklch(1% 0.12 0deg); } #oklch-10 { background-color: oklch(10% 0.12 0deg); } #oklch-20 { background-color: oklch(20% 0.12 0deg); } #oklch-30 { background-color: oklch(30% 0.12 0deg); } #oklch-40 { background-color: oklch(40% 0.12 0deg); } #oklch-50 { background-color: oklch(50% 0.12 0deg); } #oklch-60 { background-color: oklch(60% 0.12 0deg); } #oklch-70 { background-color: oklch(70% 0.12 0deg); } #oklch-80 { background-color: oklch(80% 0.12 0deg); } #oklch-90 { background-color: oklch(90% 0.12 0deg); } #oklch-99 { background-color: oklch(99% 0.12 0deg); } </code></pre></div> <div class="code-example"><pre class="brush: html hidden live-sample___lch-colors notranslate"><code><div class="container"> <div id="lch-1">lch(1 40 0)</div> <div id="lch-10">lch(10 40 0)</div> <div id="lch-20">lch(20 40 0)</div> <div id="lch-30">lch(30 40 0)</div> <div id="lch-40">lch(40 40 0)</div> <div id="lch-50">lch(50 40 0)</div> <div id="lch-60">lch(60 40 0)</div> <div id="lch-70">lch(70 40 0)</div> <div id="lch-80">lch(80 40 0)</div> <div id="lch-90">lch(90 40 0)</div> <div id="lch-99">lch(99 40 0)</div> <div></div> <div id="oklch-1">oklch(1 .12 0)</div> <div id="oklch-10">oklch(10 .12 0)</div> <div id="oklch-20">oklch(20 .12 0)</div> <div id="oklch-30">oklch(30 .12 0)</div> <div id="oklch-40">oklch(40 .12 0)</div> <div id="oklch-50">oklch(50 .12 0)</div> <div id="oklch-60">oklch(60 .12 0)</div> <div id="oklch-70">oklch(70 .12 0)</div> <div id="oklch-80">oklch(80 .12 0)</div> <div id="oklch-90">oklch(90 .12 0)</div> <div id="oklch-99">oklch(99 .12 0)</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="lch-colors sample" id="frame_lch-colors" width="100" height="150" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="lch-colors" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="lab_and_oklab"><h2 id="lab_and_oklab"><a href="#lab_and_oklab">Lab and OKLab</a></h2><div class="section-content"><p>The <a href="/en-US/docs/Web/CSS/color_value/lab"><code>lab()</code></a> functional notation expresses a given color in the CIE L*a*b* color space. The <a href="/en-US/docs/Web/CSS/color_value/oklab"><code>oklab()</code></a> function defines colors in the OKLab color space. These functions represent the entire range of colors that humans can see by specifying the color's lightness (<code>L</code>), a red/green axis value (<code>a</code>), a blue/yellow axis value (<code>b</code>), and an optional alpha transparency value.</p> <p>Similar to <code>lch()</code> and <code>oklch()</code>, the <code>lightness</code> is either:</p> <ul> <li>A <a href="/en-US/docs/Web/CSS/percentage"><code><percentage></code></a>, with <code>0%</code> being completely black and <code>100%</code> being completely white.</li> <li>A number between <code>0</code> and <code>100</code> for <code>lab()</code> and <code>0</code> and <code>1</code> for <code>oklab()</code>, where <code>0</code> is completely black and <code>1</code>/<code>100</code> is completely white.</li> </ul> <p>The <code>a</code> value is <code><number></code> between <code>-125</code> and <code>125</code> for <code>lab()</code> or <code>-0.4</code> and <code>0.4</code> for <code>oklab()</code>, a <code><percentage></code> between <code>-100%</code> and <code>100%</code>, or the keyword <code>none</code> (equivalent to <code>0%</code> in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is.</p> <p>Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.</p> <p>The <code>b</code> value has the same constraints. It specifies the color's distance along the b-axis in the color space, which defines how blue (moving towards -100%) or yellow (moving towards +100%) the color is.</p> <p>The following example demonstrates the effects of varying the <code>a</code> axis via a <code>lab()</code> function and the <code>b</code> axis via an <code>oklab()</code> function.</p> <div class="code-example"><pre class="brush: html hidden live-sample___lab-colors notranslate"><code><div class="container"> <div id="lab-100">lab(50% -100% 0)</div> <div id="lab-75">lab(50% -75% 0)</div> <div id="lab-50">lab(50% -50% 0)</div> <div id="lab-25">lab(50% -25% 0)</div> <div id="lab-0">lab(50% 0 0)</div> <div id="lab--25">lab(50% 25% 0)</div> <div id="lab--50">lab(50% 50% 0)</div> <div id="lab--75">lab(50% 75% 0)</div> <div id="lab--100">lab(50% 100% 0)</div> <div></div> <div id="oklab-4">oklab(50% 0 -0.4)</div> <div id="oklab-3">oklab(50% 0 -0.3)</div> <div id="oklab-2">oklab(50% 0 -0.2)</div> <div id="oklab-1">oklab(50% 0 -0.1)</div> <div id="oklab-0">oklab(50% 0 0)</div> <div id="oklab--1">oklab(50% 0 0.1)</div> <div id="oklab--2">oklab(50% 0 0.2)</div> <div id="oklab--3">oklab(50% 0 0.3)</div> <div id="oklab--4">oklab(50% 0 0.4)</div> </div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden live-sample___lab-colors notranslate"><code>/* Varying shades of pink */ .container { display: grid; font-family: sans-serif; font-size: 14px; color: white; grid-template-columns: repeat(5, 1fr); gap: 4px; } .container div { border-radius: 8px; padding: 8px 4px; } #lab-100 { background-color: lab(50% -100% 0); } #lab-75 { background-color: lab(50% -75% 0); } #lab-50 { background-color: lab(50% -50% 0); } #lab-25 { background-color: lab(50% -25% 0); } #lab-0 { background-color: lab(50% 0 0); } #lab--25 { background-color: lab(50% 25% 0); } #lab--50 { background-color: lab(50% 50% 0); } #lab--75 { background-color: lab(50% 75% 0); } #lab--100 { background-color: lab(50% 100% 0); } #oklab-4 { background-color: oklab(50% 0 -0.4); } #oklab-3 { background-color: oklab(50% 0 -0.3); } #oklab-2 { background-color: oklab(50% 0 -0.2); } #oklab-1 { background-color: oklab(50% 0 -0.1); } #oklab-0 { background-color: oklab(50% 0 0); } #oklab--1 { background-color: oklab(50% 0 0.1); } #oklab--2 { background-color: oklab(50% 0 0.2); } #oklab--3 { background-color: oklab(50% 0 0.3); } #oklab--4 { background-color: oklab(50% 0 0.4); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="lab-colors sample" id="frame_lab-colors" width="100" height="150" src="about:blank" data-live-path="/en-US/docs/Web/CSS/CSS_colors/Color_values/" data-live-id="lab-colors" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="additional_color_functional_notations"><h2 id="additional_color_functional_notations"><a href="#additional_color_functional_notations">Additional color functional notations</a></h2><div class="section-content"></div></section><section aria-labelledby="the_color_function"><h3 id="the_color_function"><a href="#the_color_function">The <code>color()</code> function</a></h3><div class="section-content"><p>If you want explicit control over color spaces when defining colors, you can use the <a href="/en-US/docs/Web/CSS/color_value/color"><code>color()</code></a> function.</p> <p>This is useful to describe a color for high-definition devices with wider color <a href="/en-US/docs/Glossary/Gamut">gamuts</a>. For example, if you wanted to show the <code>display-p3 0 0 1</code> color, which is outside of the sRGB gamut, you could use a <code>@media</code> <a href="/en-US/docs/Web/CSS/@media/color-gamut"><code>color-gamut</code></a> at-rule to detect if the client's hardware supports colors in this range before trying to use it:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.vibrant { background-color: color(srgb 0 0 1); } @media (color-gamut: p3) { .vibrant { background-color: color(display-p3 0 0 1); /* Equivalent to out-of-gamut color(srgb 0 0 1.042) */ } } </code></pre></div> <p>Understanding <code>color()</code> is important when it comes to relative colors, discussed next. The older sRGB color notations discussed above — <code>hsl()</code>, <code>hwb()</code>, and <code>rgb()</code>— do not express the full spectrum of visible colors, while the <code>color()</code> function supports a much wider color gamut. As a result, when using the older functions types to define relative colors, the output color returned by querying <a href="/en-US/docs/Web/API/HTMLElement/style"><code>HTMLElement.style</code></a> property or the <a href="/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue"><code>CSSStyleDeclaration.getPropertyValue()</code></a> method will be a <code>color(srgb ...)</code> value.</p> <p>To see an example of converting the <code>hsl()</code>, <code>hwb()</code>, and <code>rgb()</code> color functions to <code>color()</code> in the <code>srgb</code> color space, check out our <a href="/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool">color picker tool</a>.</p></div></section><section aria-labelledby="relative_colors"><h3 id="relative_colors"><a href="#relative_colors">Relative colors</a></h3><div class="section-content"><p>Every color function listed above can be used to define <a href="/en-US/docs/Web/CSS/CSS_colors/Relative_colors"><strong>relative colors</strong></a>, which allows <a href="/en-US/docs/Web/CSS/color_value"><code><color></code></a> values to be defined relative to other existing colors, rather than defining a color value from scratch each time. This powerful feature enables the creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants of an original color. Relative colors provide an effective mechanism to create palettes and define color adjustments. See each color function page to learn more about their relative syntaxes.</p> <p>As noted above, when using <code>rgb()</code>, <code>hsl()</code>, or <code>hwb()</code> to output a relative color, the output color will be a <code>color()</code> function in the <code>srgb</code> color space.</p></div></section><section aria-labelledby="color-mix_function"><h3 id="color-mix_function"><a href="#color-mix_function">color-mix() function</a></h3><div class="section-content"><p>The <a href="/en-US/docs/Web/CSS/color_value/color-mix"><code>color-mix()</code></a> function takes two color values of any syntax mentioned above, optionally with proportional percent values for each color, and returns the result of mixing them in a given colorspace by a given amount.</p></div></section><section aria-labelledby="light-dark_function"><h3 id="light-dark_function"><a href="#light-dark_function">light-dark() function</a></h3><div class="section-content"><p>The <a href="/en-US/docs/Web/CSS/color_value/light-dark"><code>light-dark()</code></a> function lets you specify two color values for a property intended for use in light and dark color schemes, respectively. Which one is set depends on whether the developer has set or the user has requested a light or dark color scheme. This is a shortcut function, allowing you to achieve the same results as the <a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> media feature query but with less code.</p></div></section><section aria-labelledby="see_also"><h2 id="see_also"><a href="#see_also">See also</a></h2><div class="section-content"><ul> <li><a href="/en-US/docs/Web/CSS/CSS_colors/Applying_color">Applying color to HTML elements using CSS</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely">Using color wisely</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_colors/Relative_colors">Using relative colors</a></li> <li><a href="/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance">Understanding color and luminance</a></li> <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">WCAG 1.4.1: Color contrast</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_colors">CSS color module</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-09-23T14:02:45.000Z">Sep 23, 2024</time> by <a href="/en-US/docs/Web/CSS/CSS_colors/Color_values/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/content/blob/main/files/en-us/web/css/css_colors/color_values/index.md?plain=1" title="Folder: en-us/web/css/css_colors/color_values (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_colors%2FColor_values&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fcss%2Fcss_colors%2Fcolor_values%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_colors%2FColor_values%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fcss%2Fcss_colors%2Fcolor_values%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F0a9c10fc67901972221dc7b3d006334fbfa73dce%0A*+Document+last+modified%3A+2024-09-23T14%3A02%3A45.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/en-US/docs/Web/CSS/CSS_colors/Color_values","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p>To represent a color in CSS, you have to find a way to translate the analog concept of \"color\" into a digital form that a computer can use. This is typically done by breaking the color down into components, such as amounts of different primary colors to mix together, or brightness and hue. Defined color models ensure that colors will appear the same no matter where they are rendered.</p>\n<p>A color model is a mathematical model that represents colors using numeric values. Color models describe how to create the available colors within a color space. <a href=\"/en-US/docs/Glossary/RGB\">RGB</a> was the first color model for the web. The <code>sRGB</code> color space of the RGB color model — the standard red, green, and blue color space — was created in 1996 for computer monitors and the web. A <a href=\"/en-US/docs/Glossary/Color_space\">color space</a> is a system for grouping colors so that describing any given color is consistent. If you transform a color between two different color spaces, it should look identical in both.</p>\n<p>Originally, monitors were limited regarding how many colors they could render, and CSS colors were limited by those constraints, expanding as capabilities improved. With modern devices no longer limited to RGB, we now also have color models based on human perception instead, providing a much wider <a href=\"/en-US/docs/Glossary/Gamut\">gamut</a> of colors. We can now describe color in CSS in several ways, and the options keep expanding.</p>\n<p>This guide introduces the different <a href=\"/en-US/docs/Web/CSS/color_value\"><code><color></code></a> value types. For a more detailed discussion, see the reference links provided below.</p>"}},{"type":"prose","value":{"id":"keywords","title":"Keywords","isH3":false,"content":"<p>The web defines a set of standard color names that lets you use keywords instead of numeric representations to describe colors. This is a simpler albeit more limited approach — there may not be a keyword representing the exact color you want to use.</p>\n<p>Color keywords include standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors, including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>. Named colors use the <a href=\"/en-US/docs/Glossary/RGB\">RGB</a> model and are associated with the sRGB (<code>srgb</code>) color space.</p>\n<p>There are over 160 named colors. There are named colors of special interest: <a href=\"/en-US/docs/Web/CSS/named-color#transparent\"><code>transparent</code></a> sets a transparent color value, while <a href=\"/en-US/docs/Web/CSS/color_value#currentcolor_keyword\"><code>currentcolor</code></a> sets the current value of the CSS <a href=\"/en-US/docs/Web/CSS/color\"><code>color</code></a> property. There are also named <a href=\"/en-US/docs/Web/CSS/system-color\"><code><system-color></code></a> colors, such as <code>accentcolortext</code> and <code>buttonface</code>, that reflect the default color choices made by the user, the browser, or the operating system.</p>\n<p>All color keywords are case-insensitive. See the <a href=\"/en-US/docs/Web/CSS/named-color\"><code><named-color></code></a> data type for more information on color keywords.</p>"}},{"type":"prose","value":{"id":"rgb_values","title":"RGB values","isH3":false,"content":"<p>There are two primary ways of defining an <a href=\"/en-US/docs/Glossary/RGB\">RGB</a> color by its red, green, and blue components in CSS — hexadecimal and <code>rgb()</code> values. Like named colors, these methods use the <a href=\"/en-US/docs/Glossary/RGB\">RGB</a> model and are associated with the sRGB (<code>srgb</code>) color space. However, they allow a much wider range of colors to be specified.</p>"}},{"type":"prose","value":{"id":"hexadecimal_string_notation","title":"Hexadecimal string notation","isH3":true,"content":"<p>Hexadecimal (hex) string notation uses a hexadecimal value to represent each component (red, green, and blue) of an RGB color. It may also include a fourth component: the alpha channel (or opacity).</p>\n<p>A color in hexadecimal string notation always begins with the character <code>\"#\"</code>. After that comes the hexadecimal digits of the color code. The string is case-insensitive.</p>\n<dl>\n<dt id=\"rrggbb\"><a href=\"#rrggbb\"><code>\"#rrggbb\"</code></a></dt>\n<dd>\n<p>Specifies a fully opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</p>\n</dd>\n<dt id=\"rrggbbaa\"><a href=\"#rrggbbaa\"><code>\"#rrggbbaa\"</code></a></dt>\n<dd>\n<p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</p>\n</dd>\n<dt id=\"rgb\"><a href=\"#rgb\"><code>\"#rgb\"</code></a></dt>\n<dd>\n<p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</p>\n</dd>\n<dt id=\"rgba\"><a href=\"#rgba\"><code>\"#rgba\"</code></a></dt>\n<dd>\n<p>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</p>\n</dd>\n</dl>\n<p>As shown above, the red, green, and blue color components can each be represented as a double-digit hex value representing a number between 0 (<code>00</code>) and 255 (<code>FF</code>) or a single-digit hex value (a number between 0 (<code>0</code>) and 15 (<code>F</code>).</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThe leading <code>0x</code> in the values above indicates a hexadecimal integer literal. Hexadecimal integers can include digits (<code>0</code> - <code>9</code>) and the letters <code>a</code> – <code>f</code> and <code>A</code> – <code>F</code>. The case of a character does not change its value. Therefore: <code>0xa</code> = <code>0xA</code> = <code>10</code> and <code>0xf</code> = <code>0xF</code> = <code>15</code>.</p>\n</div>\n<p>These two hex colors are equivalent color values; they're both red:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>color: #ff0000;\ncolor: #f00;\n</code></pre></div>\n<p>All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>\"#D\"</code> becomes <code>\"#DD\"</code> when drawing.</p>\n<p>To make the values 25% opaque, add in the alpha channel value as shown below:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>color: #ff000044;\ncolor: #f004;\n</code></pre></div>\n<p>See the <a href=\"/en-US/docs/Web/CSS/hex-color\"><code><hex-color></code></a> data type for more information on hexadecimal string notation for colors.</p>\n<h4 id=\"html_color_input_type\">HTML color input type</h4>\n<p>There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. For such use cases, the <a href=\"/en-US/docs/Web/HTML/Element/input\"><code><input></code></a> element has a <code>\"color\"</code> <a href=\"/en-US/docs/Web/HTML/Element/input#type\"><code>type</code></a>, which renders a color picker control.</p>\n<p>This example allows you to choose a color. Once a choice is made, the <a href=\"/en-US/docs/Web/CSS/border-color\"><code>border-color</code></a> is set to that color, and the value is displayed.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div id=\"box\">\n <label for=\"colorPicker\">Border color:</label>\n <input type=\"color\" value=\"#8888ff\" id=\"colorPicker\" />\n <output></output>\n</div>\n</code></pre></div>\n<p>The HTML creates a box containing a color picker control (with a label created using the <a href=\"/en-US/docs/Web/HTML/Element/label\"><code><label></code></a> element) and an empty <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a> element into which we'll output the color's value using JavaScript. The color input's value is always a hexadecimal string.</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"HTML color input type sample\" id=\"frame_html_color_input_type\" width=\"525\" height=\"120\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"html_color_input_type\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>#box {\n width: 500px;\n height: 100px;\n border: 5px solid rgb(245 220 225);\n padding: 4px 6px;\n font:\n 16px \"Lucida Grande\",\n \"Helvetica\",\n \"Arial\",\n \"sans-serif\";\n}\n</code></pre></div>\n<p>The following JavaScript updates the border's color to match the color picker's initial value, then adds two event handlers to the <a href=\"/en-US/docs/Web/HTML/Element/input/color\"><code><input type=\"color\"></code></a> element to respond to changes made to its value.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const colorPicker = document.querySelector(\"#colorPicker\");\nconst box = document.querySelector(\"#box\");\nconst output = document.querySelector(\"output\");\n\nbox.style.borderColor = colorPicker.value;\n\ncolorPicker.addEventListener(\n \"input\",\n (event) => {\n box.style.borderColor = event.target.value;\n },\n false,\n);\n\ncolorPicker.addEventListener(\n \"change\",\n (event) => {\n output.innerText = `${colorPicker.value}`;\n },\n false,\n);\n</code></pre></div>\n<p>The <a href=\"/en-US/docs/Web/API/Element/input_event\" title=\"input\"><code>input</code></a> event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>\n<p>The <a href=\"/en-US/docs/Web/API/HTMLElement/change_event\" title=\"change\"><code>change</code></a> event is received when the color picker's value is finalized. We respond by setting the contents of the <code><output></code> to the string value of the selected color.</p>"}},{"type":"prose","value":{"id":"rgb_functional_notation","title":"RGB functional notation","isH3":true,"content":"<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (and, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function <a href=\"/en-US/docs/Web/CSS/color_value/rgb\"><code>rgb()</code></a>. This function accepts 3 or 4 input parameters — red, green, and blue component values and an optional alpha channel value.</p>\n<p>Legal values for each of these parameters are:</p>\n<dl>\n<dt id=\"red\"><a href=\"#red\"><code>red</code>, <code>green</code>, and <code>blue</code></a></dt>\n<dd>\n<p>Each must be an <a href=\"/en-US/docs/Web/CSS/number\"><code><number></code></a> value between 0 and 255 (inclusive), a <a href=\"/en-US/docs/Web/CSS/percentage\"><code><percentage></code></a> from 0% to 100%, or the keyword <code>none</code>, which is equal to <code>0</code> in this case.</p>\n</dd>\n<dt id=\"alpha\"><a href=\"#alpha\"><code>alpha</code></a></dt>\n<dd>\n<p>The alpha channel is specified as a percentage between <code>0%</code> (fully transparent) and <code>100%</code> (fully opaque), or a number between <code>0.0</code> (equivalent to <code>0%</code>) and <code>1.0</code> (equivalent to <code>100%</code>).</p>\n</dd>\n</dl>\n<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255 0 0 / 50%)</code> or <code>rgb(100% 0 0 / 0.5)</code>.</p>\n<p>See the <a href=\"/en-US/docs/Web/CSS/color_value/rgb\"><code>rgb()</code></a> color function for more information on the RGB functional notation.</p>"}},{"type":"prose","value":{"id":"color_functions_with_a_hue_component","title":"Color functions with a hue component","isH3":false,"content":"<p>The color functions that have a <a href=\"/en-US/docs/Web/CSS/hue\"><code><hue></code></a> component — an <a href=\"/en-US/docs/Web/CSS/angle\"><code><angle></code></a> from that color model's <a href=\"/en-US/docs/Glossary/Color_wheel\">color wheel</a> — include the <code>srgb</code> color functions <code>hsl()</code> and <code>hwb()</code>, CIElab's <code>lch()</code> function, and OKLab's <code>oklch()</code> color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc.</p>"}},{"type":"prose","value":{"id":"hsl_functional_notation","title":"HSL functional notation","isH3":true,"content":"<p>The <code>hsl()</code> CSS color function was the first hue-based color function to be supported in browsers. <code>hsl()</code> is more intuitive than <code>rgb()</code> — it is easier to determine the effect of varying hue (<code>h</code>), saturation (<code>s</code>), and lightness (<code>l</code>) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported.</p>\n<p>The <code>hsl()</code> and <code>hwb()</code> sRGB color functions are both cylindrical. Hue defines the color as an <a href=\"/en-US/docs/Web/CSS/angle\"><code><angle></code></a> on a circular <a href=\"/en-US/docs/Glossary/Color_wheel\">color wheel</a>. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue.\nAs the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white).</p>\n<p><img src=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/640px-hsl_color_solid_cylinder.png\" alt=\"HSL color cylinder\" width=\"640\" height=\"480\" loading=\"lazy\"></p>\n<p>Image courtesy of user <a href=\"https://commons.wikimedia.org/wiki/User:SharkD\" class=\"external\" target=\"_blank\">SharkD</a> on <a href=\"https://en.wikipedia.org/\" class=\"external\" target=\"_blank\">Wikipedia</a>, distributed under the <a href=\"https://creativecommons.org/licenses/by-sa/3.0/\" class=\"external\" target=\"_blank\">CC BY-SA 3.0</a> license.</p>\n<p>The value of the hue (<code>H</code>) component of an HSL (or HWB) color is an angle that starts at 0° as red, then moves through yellow, green, cyan, blue, and magenta, before ending up back at red again at 360°. The value can be specified in any <a href=\"/en-US/docs/Web/CSS/angle\"><code><angle></code></a> unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). The hue value identifies what the base shade of the color is, but it doesn't control how vivid or dull, or how light or dark the color is.</p>\n<p>The saturation (<code>S</code>) component of the color specifies the percentage of the final color comprised of the specified hue, with 100% being fully saturated and 0% being a complete lack of color (greyscale). The lightness (<code>L</code>) component specifies how light the color is along a sliding scale between completely black (<code>0%</code>) and completely white (<code>100%</code>). You can also optionally include an alpha channel, preceded by a slash (<code>/</code>) to make the color less than 100% opaque.</p>\n<p>Here are some sample colors in HSL notation:</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>table {\n border: 1px solid black;\n font:\n 16px \"Open Sans\",\n Helvetica,\n Arial,\n sans-serif;\n border-spacing: 0;\n border-collapse: collapse;\n}\n\nth,\ntd {\n border: 1px solid black;\n padding: 4px 6px;\n text-align: left;\n}\n\nth {\n background-color: hsl(0 0% 75%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><table>\n <thead>\n <tr>\n <th scope=\"col\">Color in HSL notation</th>\n <th scope=\"col\">Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>hsl(90deg 0% 50%)</code></td>\n <td style=\"background-color: hsl(90deg 0% 50%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hsl(90 100% 50%)</code></td>\n <td style=\"background-color: hsl(90 100% 50%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hsl(0.15turn 50% 75%)</code></td>\n <td style=\"background-color: hsl(0.15turn 50% 75%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hsl(0.15turn 90% 75%)</code></td>\n <td style=\"background-color: hsl(0.15turn 90% 75%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hsl(0.15turn 90% 50%)</code></td>\n <td style=\"background-color: hsl(0.15turn 90% 50%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hsl(270deg 90% 50% / 50%)</code></td>\n <td style=\"background-color: hsl(270deg 90% 50% / 50%);\">&nbsp;</td>\n </tr>\n </tbody>\n</table>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"HSL functional notation sample\" id=\"frame_hsl_functional_notation\" width=\"300\" height=\"200\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"hsl_functional_notation\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>The last value is semi-opaque; it includes the optional alpha value, preceded by a forward slash.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nWhen you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p>\n</div>"}},{"type":"prose","value":{"id":"hwb_functional_notation","title":"HWB functional notation","isH3":true,"content":"<p>The <a href=\"/en-US/docs/Web/CSS/color_value/hwb\"><code>hwb()</code></a> color function uses the same hue coordinate system as <code>hsl()</code>, with <code>0deg</code> being red. However, instead of <code>hsl()</code>'s lightness and saturation, <code>hwb()</code> functions specify whiteness (<code>W</code>) and blackness (<code>B</code>). This function is also fairly intuitive — allowing you to pick a hue and then mix in amounts of white and or black to achieve the desired color.</p>\n<p><code>W</code> and <code>B</code> values range from <code>0%</code> to <code>100%</code> (or <code>0</code> to <code>1</code>). If the combined value of <code>W</code> and <code>B</code> is 100% (or <code>1</code>) or greater, the color will be grey, similar to setting the <code>s</code> to <code>0%</code> with <code>hsl()</code>. As with <code>hsl()</code>, an optional alpha value can be included, preceded by a forward slash <code>/</code>.</p>\n<p>Here are some examples of using HWB notation:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* These examples all specify varying shades of a lime green. */\nhwb(90 10% 10%)\nhwb(90 50% 10%)\nhwb(90deg 10% 10%)\nhwb(1.5708rad 60% 0%)\nhwb(.25turn 0% 40%)\n\n/* Same lime green but with an alpha value */\nhwb(90 10% 10% / 0.5)\nhwb(90 10% 10% / 50%)\n</code></pre></div>\n<p>In the below examples, we set the same hues as in the <code>hsl()</code> examples, but we are adding whiteness and blackness to each hue via <code>hwb()</code> instead of saturation and lightness:</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>{/*end the bad selector*/}\ntable {\n border: 1px solid black;\n font:\n 16px \"Open Sans\",\n Helvetica,\n Arial,\n sans-serif;\n border-spacing: 0;\n border-collapse: collapse;\n}\n\nth,\ntd {\n border: 1px solid black;\n padding: 4px 6px;\n text-align: left;\n}\n\nth {\n background-color: hwb(0 75% 25%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><table>\n <thead>\n <tr>\n <th scope=\"col\">Color in HWB notation</th>\n <th scope=\"col\">Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>hwb(90deg 50% 50%)</code></td>\n <td style=\"background-color: hwb(90deg 50% 50%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hwb(90 0% 0%)</code></td>\n <td style=\"background-color: hwb(90 0% 0%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hwb(0.15turn 25% 0%)</code></td>\n <td style=\"background-color: hwb(0.15turn 25% 0%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hwb(0.15turn 10% 25%)</code></td>\n <td style=\"background-color: hwb(0.15turn 10% 25%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hwb(1turn 10% 65%)</code></td>\n <td style=\"background-color: hwb(1turn 10% 65%);\">&nbsp;</td>\n </tr>\n <tr>\n <td><code>hwb(270deg 75% 10%)</code></td>\n <td style=\"background-color: hwb(270deg 75% 10%);\">&nbsp;</td>\n </tr>\n </tbody>\n</table>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"HWB functional notation sample\" id=\"frame_hwb_functional_notation\" width=\"300\" height=\"200\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"hwb_functional_notation\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"lch_and_oklch_cielab_and_oklab_color_spaces","title":"LCH and OKLCH: CIELAB and Oklab color spaces","isH3":true,"content":"<p>While <code>hsl()</code> and <code>hwb()</code> are intuitive, they have a major drawback. With these functions, every fully-saturated hue angle (<code>hsl(<angle> 100% 50%)</code> or <code>hwb(<angle> 0% 0%)</code>) has the same lightness, but that is not how human vision or monitors work. Putting white text on fully saturated blue (<code>hsl(240deg 100% 50%)</code>) is legible, but that same text on fully saturated yellow (<code>hsl(60deg 100% 50%)</code>) will not only be illegible, but may hurt your user's eyes. In these color functions, the lightness of a color is relative to other colors, not to human perception. In reality, not all hues have the same max saturation.</p>\n<p>Wouldn't it be fantastic if you could simply change the hue channel of a color on a site without making text illegible? You can with color functions in the CIELAB and Oklab color spaces.</p>\n<p>The CIELAB and Oklab color spaces represent the entire range of colors that humans can see. CIE lab color functions include <a href=\"/en-US/docs/Web/CSS/color_value/lch\"><code>lch()</code></a> and <a href=\"/en-US/docs/Web/CSS/color_value/lab\"><code>lab()</code></a>. Oklab color functions include <a href=\"/en-US/docs/Web/CSS/color_value/oklch\"><code>oklch()</code></a> and <a href=\"/en-US/docs/Web/CSS/color_value/oklab\"><code>oklab()</code></a>. The primary purpose of these models is that they are uniform so that a given distance between any two points in the color space should appear equally different to a viewer. Oklab is a color space that uses the same model type as CIELAB but is built using additional numerical optimization steps, so the values are considered more accurate than CIELAB. Because of this optimization, hues are more perceptually uniform.</p>\n<p>The <code>lch()</code> and <code>oklch()</code> functions use lightness (<code>L</code>), chroma (<code>C</code>), and hue (<code>H</code>), and are discussed further in this section. The <a href=\"#lab_and_oklab\"><code>lab()</code> and <code>oklab()</code></a> functions work differently, using lightness (<code>L</code>), red/green-ness (along the <code>a</code>-axis), and yellow/blue-ness (along the <code>b</code>-axis). These axes are referred to as rectangular coordinates. The main benefit of these color functions is that the \"lightness\" is perceived lightness; it is the brightness of a color as perceived by the human eye rather than the lightness as compared to other colors.</p>\n<p>Similar to the sRGB hue color functions, the hue (<code>h</code>) value in <code>lch()</code> and <code>oklch()</code> is a number, an angle, or the keyword <code>none</code> (equivalent to <code>0deg</code>) representing the color's <code><hue></code> angle. However, the colors at each angle value are not the same. The angles corresponding to particular hues differ across the sRGB, CIELAB (used by <code>lch()</code>), and Oklab (used by <code>oklch()</code>) color spaces.</p>\n<p>The following gradients demonstrate the hue colors at every angle form <code>0deg</code> to <code>360deg</code> in the sRGB, CIE Lab, and OKlab color spaces:</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___hues notranslate\"><code><p>sRGB (`hsl()` and `hwb()`)</p>\n<div id=\"srgb\"></div>\n<p>CIE Lab (`lch()`)</p>\n<div id=\"lch\"></div>\n<p>OKLab (`oklch()`)</p>\n<div id=\"oklch\"></div>\n<p>\n <label><input type=\"checkbox\" /> Toggle greyscale</label>\n</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___hues notranslate\"><code>div:has(~ p input:checked) {\n filter: grayscale(100%);\n}\np {\n margin: 0;\n}\ndiv {\n height: 50px;\n margin-bottom: 10px;\n}\n#srgb {\n background: linear-gradient(\n to right,\n hsl(0deg 100% 50%),\n hsl(90deg 100% 50%),\n hsl(180deg 100% 50%),\n hsl(270deg 100% 50%),\n hsl(360deg 100% 50%)\n );\n}\n#lch {\n background: linear-gradient(\n to right,\n lch(50% 100% 0deg),\n lch(50% 100% 90deg),\n lch(50% 100% 180deg),\n lch(50% 100% 270deg),\n lch(50% 100% 360deg)\n );\n}\n#oklch {\n background: linear-gradient(\n to right,\n oklch(50% 100% 0deg),\n oklch(50% 100% 90deg),\n oklch(50% 100% 180deg),\n oklch(50% 100% 270deg),\n oklch(50% 100% 360deg)\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"hues sample\" id=\"frame_hues\" width=\"100\" height=\"260\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"hues\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>You may notice how the brightness of the latter gradients is more even across the spectrum of hues than the sRGB gradient. Select the checkbox in the example above to convert the hue gradient to greyscale to make this more apparent.</p>\n<p>Note also how the spread of blue values in CIE Lab is longer than in the other two. This is the difference between <code>lch()</code> and <code>oklch()</code>. The <code>lch()</code> blue spread is due to a bug that shifts the chroma and lightness of hue values between <code>270deg</code> and <code>330deg</code>. This was resolved in the oklab color space and therefore the <code>oklch()</code> color notation.</p>\n<p>As discussed above, the hue (<code>H</code>) in the <code>lch()</code> and <code>oklch()</code> is an <code><angle></code>, <code>number</code> or the keyword <code>none</code>. The <code>lightness</code> is either a <a href=\"/en-US/docs/Web/CSS/percentage\"><code><percentage></code></a> or for <code>lch()</code> a number between <code>0</code> and <code>100</code> and for <code>oklch()</code> a number between <code>0</code> and <code>1</code>, with <code>0</code> or <code>0%</code> being the complete lack of lightness, which is black.</p>\n<p>The <code>C</code> is a <code><number></code>, <code><percentage></code>, or the keyword <code>none</code> (equivalent to <code>0%</code>) is the color's chroma, or the \"amount of color\". This is similar to the <code>S</code> saturation value of the <code>hsl()</code> color function. The value <code>0</code> is the complete lack of chroma or saturation; resulting in a grey between white and black inclusive, depending on the lightness value. The number values are theoretically unbounded, with <code>100%</code> being equal to <code>150</code> for <code>lch()</code> and <code>0.4</code> with <code>oklch()</code>.</p>\n<p>Like the other color functions, there is also an optional alpha transparency value, preceded by a slash (<code>/</code>).</p>\n<p>The example below shows the effect of changing the lightness value in the <code>lch()</code> and <code>oklch()</code> functions.</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___lch-colors notranslate\"><code>/* Varying shades of pink */\n.container {\n display: grid;\n font-family: sans-serif;\n font-size: 14px;\n color: white;\n grid-template-columns: repeat(6, 1fr);\n gap: 4px;\n}\n[id$=\"99\"],\n[id$=\"90\"],\n[id$=\"80\"] {\n color: lch(1% 40 0deg);\n}\n\n.container div {\n border-radius: 8px;\n padding: 8px 4px;\n}\n#lch-1 {\n background-color: lch(1% 40 0deg);\n}\n#lch-10 {\n background-color: lch(10% 40 0deg);\n}\n#lch-20 {\n background-color: lch(20% 40 0deg);\n}\n#lch-30 {\n background-color: lch(30% 40 0deg);\n}\n#lch-40 {\n background-color: lch(40% 40 0deg);\n}\n#lch-50 {\n background-color: lch(50% 40 0deg);\n}\n#lch-60 {\n background-color: lch(60% 40 0deg);\n}\n#lch-70 {\n background-color: lch(70% 40 0deg);\n}\n#lch-80 {\n background-color: lch(80% 40 0deg);\n}\n#lch-90 {\n background-color: lch(90% 40 0deg);\n}\n#lch-99 {\n background-color: lch(99% 40 0deg);\n}\n\n#oklch-1 {\n background-color: oklch(1% 0.12 0deg);\n}\n#oklch-10 {\n background-color: oklch(10% 0.12 0deg);\n}\n#oklch-20 {\n background-color: oklch(20% 0.12 0deg);\n}\n#oklch-30 {\n background-color: oklch(30% 0.12 0deg);\n}\n#oklch-40 {\n background-color: oklch(40% 0.12 0deg);\n}\n#oklch-50 {\n background-color: oklch(50% 0.12 0deg);\n}\n#oklch-60 {\n background-color: oklch(60% 0.12 0deg);\n}\n#oklch-70 {\n background-color: oklch(70% 0.12 0deg);\n}\n#oklch-80 {\n background-color: oklch(80% 0.12 0deg);\n}\n#oklch-90 {\n background-color: oklch(90% 0.12 0deg);\n}\n#oklch-99 {\n background-color: oklch(99% 0.12 0deg);\n}\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___lch-colors notranslate\"><code><div class=\"container\">\n <div id=\"lch-1\">lch(1 40 0)</div>\n <div id=\"lch-10\">lch(10 40 0)</div>\n <div id=\"lch-20\">lch(20 40 0)</div>\n <div id=\"lch-30\">lch(30 40 0)</div>\n <div id=\"lch-40\">lch(40 40 0)</div>\n <div id=\"lch-50\">lch(50 40 0)</div>\n <div id=\"lch-60\">lch(60 40 0)</div>\n <div id=\"lch-70\">lch(70 40 0)</div>\n <div id=\"lch-80\">lch(80 40 0)</div>\n <div id=\"lch-90\">lch(90 40 0)</div>\n <div id=\"lch-99\">lch(99 40 0)</div>\n <div></div>\n <div id=\"oklch-1\">oklch(1 .12 0)</div>\n <div id=\"oklch-10\">oklch(10 .12 0)</div>\n <div id=\"oklch-20\">oklch(20 .12 0)</div>\n <div id=\"oklch-30\">oklch(30 .12 0)</div>\n <div id=\"oklch-40\">oklch(40 .12 0)</div>\n <div id=\"oklch-50\">oklch(50 .12 0)</div>\n <div id=\"oklch-60\">oklch(60 .12 0)</div>\n <div id=\"oklch-70\">oklch(70 .12 0)</div>\n <div id=\"oklch-80\">oklch(80 .12 0)</div>\n <div id=\"oklch-90\">oklch(90 .12 0)</div>\n <div id=\"oklch-99\">oklch(99 .12 0)</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"lch-colors sample\" id=\"frame_lch-colors\" width=\"100\" height=\"150\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"lch-colors\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"lab_and_oklab","title":"Lab and OKLab","isH3":false,"content":"<p>The <a href=\"/en-US/docs/Web/CSS/color_value/lab\"><code>lab()</code></a> functional notation expresses a given color in the CIE L*a*b* color space. The <a href=\"/en-US/docs/Web/CSS/color_value/oklab\"><code>oklab()</code></a> function defines colors in the OKLab color space. These functions represent the entire range of colors that humans can see by specifying the color's lightness (<code>L</code>), a red/green axis value (<code>a</code>), a blue/yellow axis value (<code>b</code>), and an optional alpha transparency value.</p>\n<p>Similar to <code>lch()</code> and <code>oklch()</code>, the <code>lightness</code> is either:</p>\n<ul>\n<li>A <a href=\"/en-US/docs/Web/CSS/percentage\"><code><percentage></code></a>, with <code>0%</code> being completely black and <code>100%</code> being completely white.</li>\n<li>A number between <code>0</code> and <code>100</code> for <code>lab()</code> and <code>0</code> and <code>1</code> for <code>oklab()</code>, where <code>0</code> is completely black and <code>1</code>/<code>100</code> is completely white.</li>\n</ul>\n<p>The <code>a</code> value is <code><number></code> between <code>-125</code> and <code>125</code> for <code>lab()</code> or <code>-0.4</code> and <code>0.4</code> for <code>oklab()</code>, a <code><percentage></code> between <code>-100%</code> and <code>100%</code>, or the keyword <code>none</code> (equivalent to <code>0%</code> in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is.</p>\n<p>Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.</p>\n<p>The <code>b</code> value has the same constraints. It specifies the color's distance along the b-axis in the color space, which defines how blue (moving towards -100%) or yellow (moving towards +100%) the color is.</p>\n<p>The following example demonstrates the effects of varying the <code>a</code> axis via a <code>lab()</code> function and the <code>b</code> axis via an <code>oklab()</code> function.</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___lab-colors notranslate\"><code><div class=\"container\">\n <div id=\"lab-100\">lab(50% -100% 0)</div>\n <div id=\"lab-75\">lab(50% -75% 0)</div>\n <div id=\"lab-50\">lab(50% -50% 0)</div>\n <div id=\"lab-25\">lab(50% -25% 0)</div>\n <div id=\"lab-0\">lab(50% 0 0)</div>\n <div id=\"lab--25\">lab(50% 25% 0)</div>\n <div id=\"lab--50\">lab(50% 50% 0)</div>\n <div id=\"lab--75\">lab(50% 75% 0)</div>\n <div id=\"lab--100\">lab(50% 100% 0)</div>\n <div></div>\n <div id=\"oklab-4\">oklab(50% 0 -0.4)</div>\n <div id=\"oklab-3\">oklab(50% 0 -0.3)</div>\n <div id=\"oklab-2\">oklab(50% 0 -0.2)</div>\n <div id=\"oklab-1\">oklab(50% 0 -0.1)</div>\n <div id=\"oklab-0\">oklab(50% 0 0)</div>\n <div id=\"oklab--1\">oklab(50% 0 0.1)</div>\n <div id=\"oklab--2\">oklab(50% 0 0.2)</div>\n <div id=\"oklab--3\">oklab(50% 0 0.3)</div>\n <div id=\"oklab--4\">oklab(50% 0 0.4)</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___lab-colors notranslate\"><code>/* Varying shades of pink */\n.container {\n display: grid;\n font-family: sans-serif;\n font-size: 14px;\n color: white;\n grid-template-columns: repeat(5, 1fr);\n gap: 4px;\n}\n.container div {\n border-radius: 8px;\n padding: 8px 4px;\n}\n#lab-100 {\n background-color: lab(50% -100% 0);\n}\n#lab-75 {\n background-color: lab(50% -75% 0);\n}\n#lab-50 {\n background-color: lab(50% -50% 0);\n}\n#lab-25 {\n background-color: lab(50% -25% 0);\n}\n#lab-0 {\n background-color: lab(50% 0 0);\n}\n#lab--25 {\n background-color: lab(50% 25% 0);\n}\n#lab--50 {\n background-color: lab(50% 50% 0);\n}\n#lab--75 {\n background-color: lab(50% 75% 0);\n}\n#lab--100 {\n background-color: lab(50% 100% 0);\n}\n\n#oklab-4 {\n background-color: oklab(50% 0 -0.4);\n}\n#oklab-3 {\n background-color: oklab(50% 0 -0.3);\n}\n#oklab-2 {\n background-color: oklab(50% 0 -0.2);\n}\n#oklab-1 {\n background-color: oklab(50% 0 -0.1);\n}\n#oklab-0 {\n background-color: oklab(50% 0 0);\n}\n#oklab--1 {\n background-color: oklab(50% 0 0.1);\n}\n#oklab--2 {\n background-color: oklab(50% 0 0.2);\n}\n#oklab--3 {\n background-color: oklab(50% 0 0.3);\n}\n#oklab--4 {\n background-color: oklab(50% 0 0.4);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"lab-colors sample\" id=\"frame_lab-colors\" width=\"100\" height=\"150\" src=\"about:blank\" data-live-path=\"/en-US/docs/Web/CSS/CSS_colors/Color_values/\" data-live-id=\"lab-colors\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"additional_color_functional_notations","title":"Additional color functional notations","isH3":false,"content":""}},{"type":"prose","value":{"id":"the_color_function","title":"The <code>color()</code> function","isH3":true,"content":"<p>If you want explicit control over color spaces when defining colors, you can use the <a href=\"/en-US/docs/Web/CSS/color_value/color\"><code>color()</code></a> function.</p>\n<p>This is useful to describe a color for high-definition devices with wider color <a href=\"/en-US/docs/Glossary/Gamut\">gamuts</a>.\nFor example, if you wanted to show the <code>display-p3 0 0 1</code> color, which is outside of the sRGB gamut, you could use a <code>@media</code> <a href=\"/en-US/docs/Web/CSS/@media/color-gamut\"><code>color-gamut</code></a> at-rule to detect if the client's hardware supports colors in this range before trying to use it:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.vibrant {\n background-color: color(srgb 0 0 1);\n}\n\n@media (color-gamut: p3) {\n .vibrant {\n background-color: color(display-p3 0 0 1);\n /* Equivalent to out-of-gamut color(srgb 0 0 1.042) */\n }\n}\n</code></pre></div>\n<p>Understanding <code>color()</code> is important when it comes to relative colors, discussed next. The older sRGB color notations discussed above — <code>hsl()</code>, <code>hwb()</code>, and <code>rgb()</code>— do not express the full spectrum of visible colors, while the <code>color()</code> function supports a much wider color gamut. As a result, when using the older functions types to define relative colors, the output color returned by querying <a href=\"/en-US/docs/Web/API/HTMLElement/style\"><code>HTMLElement.style</code></a> property or the <a href=\"/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue\"><code>CSSStyleDeclaration.getPropertyValue()</code></a> method will be a <code>color(srgb ...)</code> value.</p>\n<p>To see an example of converting the <code>hsl()</code>, <code>hwb()</code>, and <code>rgb()</code> color functions to <code>color()</code> in the <code>srgb</code> color space, check out our <a href=\"/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool\">color picker tool</a>.</p>"}},{"type":"prose","value":{"id":"relative_colors","title":"Relative colors","isH3":true,"content":"<p>Every color function listed above can be used to define <a href=\"/en-US/docs/Web/CSS/CSS_colors/Relative_colors\"><strong>relative colors</strong></a>, which allows <a href=\"/en-US/docs/Web/CSS/color_value\"><code><color></code></a> values to be defined relative to other existing colors, rather than defining a color value from scratch each time. This powerful feature enables the creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants of an original color. Relative colors provide an effective mechanism to create palettes and define color adjustments. See each color function page to learn more about their relative syntaxes.</p>\n<p>As noted above, when using <code>rgb()</code>, <code>hsl()</code>, or <code>hwb()</code> to output a relative color, the output color will be a <code>color()</code> function in the <code>srgb</code> color space.</p>"}},{"type":"prose","value":{"id":"color-mix_function","title":"color-mix() function","isH3":true,"content":"<p>The <a href=\"/en-US/docs/Web/CSS/color_value/color-mix\"><code>color-mix()</code></a> function takes two color values of any syntax mentioned above, optionally with proportional percent values for each color, and returns the result of mixing them in a given colorspace by a given amount.</p>"}},{"type":"prose","value":{"id":"light-dark_function","title":"light-dark() function","isH3":true,"content":"<p>The <a href=\"/en-US/docs/Web/CSS/color_value/light-dark\"><code>light-dark()</code></a> function lets you specify two color values for a property intended for use in light and dark color schemes, respectively. Which one is set depends on whether the developer has set or the user has requested a light or dark color scheme. This is a shortcut function, allowing you to achieve the same results as the <a href=\"/en-US/docs/Web/CSS/@media/prefers-color-scheme\"><code>prefers-color-scheme</code></a> media feature query but with less code.</p>"}},{"type":"prose","value":{"id":"see_also","title":"See also","isH3":false,"content":"<ul>\n<li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Applying_color\">Applying color to HTML elements using CSS</a></li>\n<li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely\">Using color wisely</a></li>\n<li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Relative_colors\">Using relative colors</a></li>\n<li><a href=\"/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance\">Understanding color and luminance</a></li>\n<li><a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast\">WCAG 1.4.1: Color contrast</a></li>\n<li><a href=\"/en-US/docs/Web/CSS/CSS_colors\">CSS color module</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Web/CSS/CSS_colors/Color_values","modified":"2024-09-23T14:02:45.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"CSS Farbwerte","native":"Deutsch"}],"pageTitle":"CSS color values - CSS: Cascading Style Sheets | MDN","parents":[{"uri":"/en-US/docs/Web","title":"References"},{"uri":"/en-US/docs/Web/CSS","title":"CSS"},{"uri":"/en-US/docs/Web/CSS/CSS_colors","title":"CSS colors"},{"uri":"/en-US/docs/Web/CSS/CSS_colors/Color_values","title":"Color values"}],"popularity":null,"short_title":"Color values","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Web/CSS\">CSS</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">Beginner's tutorials</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">Your first website: Styling the content</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Challenge: Styling a biography page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Basic CSS selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Handling conflicts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Challenge: Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Challenge: Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Challenge: A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout\">CSS layout</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Media query fundamentals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Web/CSS/Reference\">CSS reference</a></li><li class=\"toggle\"><details><summary>Modules</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_anchor_positioning\">CSS anchor positioning</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_animations\">CSS animations</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders\">CSS backgrounds and borders</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_basic_user_interface\">CSS basic user interface</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment\">CSS box alignment</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_model\">CSS box model</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_sizing\">CSS box sizing</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_cascade\">CSS cascading and inheritance</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_color_adjustment\">CSS color adjustment</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors\">CSS colors</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_compositing_and_blending\">CSS compositing and blending</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_conditional_rules\">CSS conditional rules</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_containment\">CSS containment</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_counter_styles\">CSS counter styles</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_cascading_variables\">CSS custom properties for cascading variables</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display\">CSS display</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_filter_effects\">CSS filter effects</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout\">CSS flexible box layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_font_loading\">CSS font loading</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_fonts\">CSS fonts</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_fragmentation\">CSS fragmentation</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_generated_content\">CSS generated content</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_images\">CSS images</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_inline_layout\">CSS inline layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_lists\">CSS lists and counters</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_logical_properties_and_values\">CSS logical properties and values</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_masking\">CSS masking</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries\">CSS media queries</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_motion_path\">CSS motion path</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout\">CSS multi-column layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_namespaces\">CSS namespaces</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_nesting\">CSS nesting</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_overflow\">CSS overflow</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_overscroll_behavior\">CSS overscroll behavior</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_paged_media\">CSS paged media</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_positioned_layout\">CSS positioned layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_properties_and_values_API\">CSS properties and values API</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_pseudo-elements\">CSS pseudo-elements</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_ruby_layout\">CSS ruby layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scoping\">CSS scoping</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scroll_snap\">CSS scroll snap</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scroll-driven_animations\">CSS scroll-driven animations</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scrollbars_styling\">CSS scrollbars styling</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_selectors\">CSS selectors</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shadow_parts\">CSS shadow parts</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes\">CSS shapes</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_syntax\">CSS syntax</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_table\">CSS table</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_text\">CSS text</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_text_decoration\">CSS text decoration</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_transforms\">CSS transforms</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_transitions\">CSS transitions</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_Values_and_Units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_view_transitions\">CSS view transitions</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_writing_modes\">CSS writing modes</a></li><li><a href=\"/en-US/docs/Web/CSS/CSSOM_view\">CSSOM view</a></li></ol></details></li><li class=\"toggle\"><details><summary>Properties</summary><ol><li class=\"toggle\"><details><summary>-moz-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/-moz-float-edge\">-moz-float-edge</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-force-broken-image-icon\">-moz-force-broken-image-icon</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-image-region\">-moz-image-region</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-orient\">-moz-orient</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-user-focus\">-moz-user-focus</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-user-input\">-moz-user-input</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>-webkit-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/-webkit-border-before\">-webkit-border-before</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-box-reflect\">-webkit-box-reflect</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-box-image\">-webkit-mask-box-image</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-composite\">-webkit-mask-composite</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-position-x\">-webkit-mask-position-x</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-position-y\">-webkit-mask-position-y</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-repeat-x\">-webkit-mask-repeat-x</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-repeat-y\">-webkit-mask-repeat-y</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-tap-highlight-color\">-webkit-tap-highlight-color</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-fill-color\">-webkit-text-fill-color</a></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-security\">-webkit-text-security</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-stroke\">-webkit-text-stroke</a></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-stroke-color\">-webkit-text-stroke-color</a></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-stroke-width\">-webkit-text-stroke-width</a></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-touch-callout\">-webkit-touch-callout</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/--*\">Custom properties (--*): CSS variables</a></li><li><a href=\"/en-US/docs/Web/CSS/accent-color\">accent-color</a></li><li class=\"toggle\"><details><summary>align-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/align-content\">align-content</a></li><li><a href=\"/en-US/docs/Web/CSS/align-items\">align-items</a></li><li><a href=\"/en-US/docs/Web/CSS/align-self\">align-self</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/alignment-baseline\">alignment-baseline</a></li><li><a href=\"/en-US/docs/Web/CSS/all\">all</a></li><li><a href=\"/en-US/docs/Web/CSS/anchor-name\">anchor-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>animation-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/animation\">animation</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-composition\">animation-composition</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-delay\">animation-delay</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-direction\">animation-direction</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-duration\">animation-duration</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-fill-mode\">animation-fill-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-iteration-count\">animation-iteration-count</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-name\">animation-name</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-play-state\">animation-play-state</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-range\">animation-range</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-range-end\">animation-range-end</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-range-start\">animation-range-start</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline\">animation-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-timing-function\">animation-timing-function</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/appearance\">appearance</a></li><li><a href=\"/en-US/docs/Web/CSS/aspect-ratio\">aspect-ratio</a></li><li><a href=\"/en-US/docs/Web/CSS/backdrop-filter\">backdrop-filter</a></li><li><a href=\"/en-US/docs/Web/CSS/backface-visibility\">backface-visibility</a></li><li class=\"toggle\"><details><summary>background-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/background\">background</a></li><li><a href=\"/en-US/docs/Web/CSS/background-attachment\">background-attachment</a></li><li><a href=\"/en-US/docs/Web/CSS/background-blend-mode\">background-blend-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/background-clip\">background-clip</a></li><li><a href=\"/en-US/docs/Web/CSS/background-color\">background-color</a></li><li><a href=\"/en-US/docs/Web/CSS/background-image\">background-image</a></li><li><a href=\"/en-US/docs/Web/CSS/background-origin\">background-origin</a></li><li><a href=\"/en-US/docs/Web/CSS/background-position\">background-position</a></li><li><a href=\"/en-US/docs/Web/CSS/background-position-x\">background-position-x</a></li><li><a href=\"/en-US/docs/Web/CSS/background-position-y\">background-position-y</a></li><li><a href=\"/en-US/docs/Web/CSS/background-repeat\">background-repeat</a></li><li><a href=\"/en-US/docs/Web/CSS/background-size\">background-size</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/block-size\">block-size</a></li><li class=\"toggle\"><details><summary>border-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/border\">border</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block\">border-block</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-color\">border-block-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-end\">border-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-end-color\">border-block-end-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-end-style\">border-block-end-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-end-width\">border-block-end-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-start\">border-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-start-color\">border-block-start-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-start-style\">border-block-start-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-start-width\">border-block-start-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-style\">border-block-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-block-width\">border-block-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom\">border-bottom</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-color\">border-bottom-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-left-radius\">border-bottom-left-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-right-radius\">border-bottom-right-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-style\">border-bottom-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-width\">border-bottom-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-collapse\">border-collapse</a></li><li><a href=\"/en-US/docs/Web/CSS/border-color\">border-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-end-end-radius\">border-end-end-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-end-start-radius\">border-end-start-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image\">border-image</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image-outset\">border-image-outset</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image-repeat\">border-image-repeat</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image-slice\">border-image-slice</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image-source\">border-image-source</a></li><li><a href=\"/en-US/docs/Web/CSS/border-image-width\">border-image-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline\">border-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-color\">border-inline-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-end\">border-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-end-color\">border-inline-end-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-end-style\">border-inline-end-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-end-width\">border-inline-end-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-start\">border-inline-start</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-start-color\">border-inline-start-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-start-style\">border-inline-start-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-start-width\">border-inline-start-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-style\">border-inline-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-inline-width\">border-inline-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-left\">border-left</a></li><li><a href=\"/en-US/docs/Web/CSS/border-left-color\">border-left-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-left-style\">border-left-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-left-width\">border-left-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-radius\">border-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-right\">border-right</a></li><li><a href=\"/en-US/docs/Web/CSS/border-right-color\">border-right-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-right-style\">border-right-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-right-width\">border-right-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-spacing\">border-spacing</a></li><li><a href=\"/en-US/docs/Web/CSS/border-start-end-radius\">border-start-end-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-start-start-radius\">border-start-start-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-style\">border-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top\">border-top</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top-color\">border-top-color</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top-left-radius\">border-top-left-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top-right-radius\">border-top-right-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top-style\">border-top-style</a></li><li><a href=\"/en-US/docs/Web/CSS/border-top-width\">border-top-width</a></li><li><a href=\"/en-US/docs/Web/CSS/border-width\">border-width</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/bottom\">bottom</a></li><li class=\"toggle\"><details><summary>box-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/box-align\">box-align</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-decoration-break\">box-decoration-break</a></li><li><a href=\"/en-US/docs/Web/CSS/box-direction\">box-direction</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-flex\">box-flex</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-flex-group\">box-flex-group</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-lines\">box-lines</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-ordinal-group\">box-ordinal-group</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-orient\">box-orient</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-pack\">box-pack</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-shadow\">box-shadow</a></li><li><a href=\"/en-US/docs/Web/CSS/box-sizing\">box-sizing</a></li></ol></details></li><li class=\"toggle\"><details><summary>break-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/break-after\">break-after</a></li><li><a href=\"/en-US/docs/Web/CSS/break-before\">break-before</a></li><li><a href=\"/en-US/docs/Web/CSS/break-inside\">break-inside</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/caption-side\">caption-side</a></li><li><a href=\"/en-US/docs/Web/CSS/caret-color\">caret-color</a></li><li><a href=\"/en-US/docs/Web/CSS/clear\">clear</a></li><li class=\"toggle\"><details><summary>clip-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/clip\">clip</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/clip-path\">clip-path</a></li><li><a href=\"/en-US/docs/Web/CSS/clip-rule\">clip-rule</a></li></ol></details></li><li class=\"toggle\"><details><summary>color-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/color\">color</a></li><li><a href=\"/en-US/docs/Web/CSS/color-interpolation\">color-interpolation</a></li><li><a href=\"/en-US/docs/Web/CSS/color-interpolation-filters\">color-interpolation-filters</a></li><li><a href=\"/en-US/docs/Web/CSS/color-scheme\">color-scheme</a></li></ol></details></li><li class=\"toggle\"><details><summary>column-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/column-count\">column-count</a></li><li><a href=\"/en-US/docs/Web/CSS/column-fill\">column-fill</a></li><li><a href=\"/en-US/docs/Web/CSS/column-gap\">column-gap</a></li><li><a href=\"/en-US/docs/Web/CSS/column-rule\">column-rule</a></li><li><a href=\"/en-US/docs/Web/CSS/column-rule-color\">column-rule-color</a></li><li><a href=\"/en-US/docs/Web/CSS/column-rule-style\">column-rule-style</a></li><li><a href=\"/en-US/docs/Web/CSS/column-rule-width\">column-rule-width</a></li><li><a href=\"/en-US/docs/Web/CSS/column-span\">column-span</a></li><li><a href=\"/en-US/docs/Web/CSS/column-width\">column-width</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/columns\">columns</a></li><li class=\"toggle\"><details><summary>contain-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/contain\">contain</a></li><li><a href=\"/en-US/docs/Web/CSS/contain-intrinsic-block-size\">contain-intrinsic-block-size</a></li><li><a href=\"/en-US/docs/Web/CSS/contain-intrinsic-height\">contain-intrinsic-height</a></li><li><a href=\"/en-US/docs/Web/CSS/contain-intrinsic-inline-size\">contain-intrinsic-inline-size</a></li><li><a href=\"/en-US/docs/Web/CSS/contain-intrinsic-size\">contain-intrinsic-size</a></li><li><a href=\"/en-US/docs/Web/CSS/contain-intrinsic-width\">contain-intrinsic-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>container-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/container\">container</a></li><li><a href=\"/en-US/docs/Web/CSS/container-name\">container-name</a></li><li><a href=\"/en-US/docs/Web/CSS/container-type\">container-type</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/content\">content</a></li><li><a href=\"/en-US/docs/Web/CSS/content-visibility\">content-visibility</a></li><li class=\"toggle\"><details><summary>counter-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/counter-increment\">counter-increment</a></li><li><a href=\"/en-US/docs/Web/CSS/counter-reset\">counter-reset</a></li><li><a href=\"/en-US/docs/Web/CSS/counter-set\">counter-set</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/cursor\">cursor</a></li><li><a href=\"/en-US/docs/Web/CSS/cx\">cx</a></li><li><a href=\"/en-US/docs/Web/CSS/cy\">cy</a></li><li><a href=\"/en-US/docs/Web/CSS/d\">d</a></li><li><a href=\"/en-US/docs/Web/CSS/direction\">direction</a></li><li><a href=\"/en-US/docs/Web/CSS/display\">display</a></li><li><a href=\"/en-US/docs/Web/CSS/dominant-baseline\">dominant-baseline</a></li><li><a href=\"/en-US/docs/Web/CSS/empty-cells\">empty-cells</a></li><li><a href=\"/en-US/docs/Web/CSS/field-sizing\">field-sizing</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>fill-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/fill\">fill</a></li><li><a href=\"/en-US/docs/Web/CSS/fill-opacity\">fill-opacity</a></li><li><a href=\"/en-US/docs/Web/CSS/fill-rule\">fill-rule</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/filter\">filter</a></li><li class=\"toggle\"><details><summary>flex-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/flex\">flex</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-basis\">flex-basis</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-direction\">flex-direction</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-flow\">flex-flow</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-grow\">flex-grow</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-shrink\">flex-shrink</a></li><li><a href=\"/en-US/docs/Web/CSS/flex-wrap\">flex-wrap</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/float\">float</a></li><li><a href=\"/en-US/docs/Web/CSS/flood-color\">flood-color</a></li><li><a href=\"/en-US/docs/Web/CSS/flood-opacity\">flood-opacity</a></li><li class=\"toggle\"><details><summary>font-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/font\">font</a></li><li><a href=\"/en-US/docs/Web/CSS/font-family\">font-family</a></li><li><a href=\"/en-US/docs/Web/CSS/font-feature-settings\">font-feature-settings</a></li><li><a href=\"/en-US/docs/Web/CSS/font-kerning\">font-kerning</a></li><li><a href=\"/en-US/docs/Web/CSS/font-language-override\">font-language-override</a></li><li><a href=\"/en-US/docs/Web/CSS/font-optical-sizing\">font-optical-sizing</a></li><li><a href=\"/en-US/docs/Web/CSS/font-palette\">font-palette</a></li><li><a href=\"/en-US/docs/Web/CSS/font-size\">font-size</a></li><li><a href=\"/en-US/docs/Web/CSS/font-size-adjust\">font-size-adjust</a></li><li><a href=\"/en-US/docs/Web/CSS/font-smooth\">font-smooth</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/font-stretch\">font-stretch</a></li><li><a href=\"/en-US/docs/Web/CSS/font-style\">font-style</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis\">font-synthesis</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-position\">font-synthesis-position</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-small-caps\">font-synthesis-small-caps</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-style\">font-synthesis-style</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-weight\">font-synthesis-weight</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant\">font-variant</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-alternates\">font-variant-alternates</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-caps\">font-variant-caps</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-east-asian\">font-variant-east-asian</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-emoji\">font-variant-emoji</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-ligatures\">font-variant-ligatures</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-numeric\">font-variant-numeric</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-position\">font-variant-position</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variation-settings\">font-variation-settings</a></li><li><a href=\"/en-US/docs/Web/CSS/font-weight\">font-weight</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/forced-color-adjust\">forced-color-adjust</a></li><li><a href=\"/en-US/docs/Web/CSS/gap\">gap</a></li><li class=\"toggle\"><details><summary>grid-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/grid\">grid</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-area\">grid-area</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-auto-columns\">grid-auto-columns</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-auto-flow\">grid-auto-flow</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-auto-rows\">grid-auto-rows</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-column\">grid-column</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-column-end\">grid-column-end</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-column-start\">grid-column-start</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-row\">grid-row</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-row-end\">grid-row-end</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-row-start\">grid-row-start</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-template\">grid-template</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-template-areas\">grid-template-areas</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-template-columns\">grid-template-columns</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-template-rows\">grid-template-rows</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/hanging-punctuation\">hanging-punctuation</a></li><li><a href=\"/en-US/docs/Web/CSS/height\">height</a></li><li><a href=\"/en-US/docs/Web/CSS/hyphenate-character\">hyphenate-character</a></li><li><a href=\"/en-US/docs/Web/CSS/hyphenate-limit-chars\">hyphenate-limit-chars</a></li><li><a href=\"/en-US/docs/Web/CSS/hyphens\">hyphens</a></li><li class=\"toggle\"><details><summary>image-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/image-orientation\">image-orientation</a></li><li><a href=\"/en-US/docs/Web/CSS/image-rendering\">image-rendering</a></li><li><a href=\"/en-US/docs/Web/CSS/image-resolution\">image-resolution</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/initial-letter\">initial-letter</a></li><li><a href=\"/en-US/docs/Web/CSS/inline-size\">inline-size</a></li><li class=\"toggle\"><details><summary>inset-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/inset\">inset</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-block\">inset-block</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-block-end\">inset-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-block-start\">inset-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-inline\">inset-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-inline-end\">inset-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/inset-inline-start\">inset-inline-start</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/interpolate-size\">interpolate-size</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/isolation\">isolation</a></li><li class=\"toggle\"><details><summary>justify-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/justify-content\">justify-content</a></li><li><a href=\"/en-US/docs/Web/CSS/justify-items\">justify-items</a></li><li><a href=\"/en-US/docs/Web/CSS/justify-self\">justify-self</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/left\">left</a></li><li><a href=\"/en-US/docs/Web/CSS/letter-spacing\">letter-spacing</a></li><li><a href=\"/en-US/docs/Web/CSS/lighting-color\">lighting-color</a></li><li class=\"toggle\"><details><summary>line-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/line-break\">line-break</a></li><li><a href=\"/en-US/docs/Web/CSS/line-clamp\">line-clamp</a></li><li><a href=\"/en-US/docs/Web/CSS/line-height\">line-height</a></li><li><a href=\"/en-US/docs/Web/CSS/line-height-step\">line-height-step</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>list-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/list-style\">list-style</a></li><li><a href=\"/en-US/docs/Web/CSS/list-style-image\">list-style-image</a></li><li><a href=\"/en-US/docs/Web/CSS/list-style-position\">list-style-position</a></li><li><a href=\"/en-US/docs/Web/CSS/list-style-type\">list-style-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>margin-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/margin\">margin</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-block\">margin-block</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-block-end\">margin-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-block-start\">margin-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-bottom\">margin-bottom</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-inline\">margin-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-inline-end\">margin-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-inline-start\">margin-inline-start</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-left\">margin-left</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-right\">margin-right</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-top\">margin-top</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-trim\">margin-trim</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>marker-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/marker\">marker</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-end\">marker-end</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-mid\">marker-mid</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-start\">marker-start</a></li></ol></details></li><li class=\"toggle\"><details><summary>mask-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/mask\">mask</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border\">mask-border</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-mode\">mask-border-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-outset\">mask-border-outset</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-repeat\">mask-border-repeat</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-slice\">mask-border-slice</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-source\">mask-border-source</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-width\">mask-border-width</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-clip\">mask-clip</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-composite\">mask-composite</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-image\">mask-image</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-mode\">mask-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-origin\">mask-origin</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-position\">mask-position</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-repeat\">mask-repeat</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-size\">mask-size</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-type\">mask-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>math-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/math-depth\">math-depth</a></li><li><a href=\"/en-US/docs/Web/CSS/math-shift\">math-shift</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/math-style\">math-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>max-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/max-block-size\">max-block-size</a></li><li><a href=\"/en-US/docs/Web/CSS/max-height\">max-height</a></li><li><a href=\"/en-US/docs/Web/CSS/max-inline-size\">max-inline-size</a></li><li><a href=\"/en-US/docs/Web/CSS/max-width\">max-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>min-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/min-block-size\">min-block-size</a></li><li><a href=\"/en-US/docs/Web/CSS/min-height\">min-height</a></li><li><a href=\"/en-US/docs/Web/CSS/min-inline-size\">min-inline-size</a></li><li><a href=\"/en-US/docs/Web/CSS/min-width\">min-width</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/mix-blend-mode\">mix-blend-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/object-fit\">object-fit</a></li><li><a href=\"/en-US/docs/Web/CSS/object-position\">object-position</a></li><li class=\"toggle\"><details><summary>offset-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/offset\">offset</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-anchor\">offset-anchor</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-distance\">offset-distance</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-path\">offset-path</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-position\">offset-position</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-rotate\">offset-rotate</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/opacity\">opacity</a></li><li><a href=\"/en-US/docs/Web/CSS/order\">order</a></li><li><a href=\"/en-US/docs/Web/CSS/orphans\">orphans</a></li><li class=\"toggle\"><details><summary>outline-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/outline\">outline</a></li><li><a href=\"/en-US/docs/Web/CSS/outline-color\">outline-color</a></li><li><a href=\"/en-US/docs/Web/CSS/outline-offset\">outline-offset</a></li><li><a href=\"/en-US/docs/Web/CSS/outline-style\">outline-style</a></li><li><a href=\"/en-US/docs/Web/CSS/outline-width\">outline-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>overflow-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/overflow\">overflow</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-anchor\">overflow-anchor</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-block\">overflow-block</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-clip-margin\">overflow-clip-margin</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-inline\">overflow-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-wrap\">overflow-wrap</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-x\">overflow-x</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-y\">overflow-y</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/overlay\">overlay</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>overscroll-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior\">overscroll-behavior</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-block\">overscroll-behavior-block</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-inline\">overscroll-behavior-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-x\">overscroll-behavior-x</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-y\">overscroll-behavior-y</a></li></ol></details></li><li class=\"toggle\"><details><summary>padding-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/padding\">padding</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-block\">padding-block</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-block-end\">padding-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-block-start\">padding-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-bottom\">padding-bottom</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-inline\">padding-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-inline-end\">padding-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-inline-start\">padding-inline-start</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-left\">padding-left</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-right\">padding-right</a></li><li><a href=\"/en-US/docs/Web/CSS/padding-top\">padding-top</a></li></ol></details></li><li class=\"toggle\"><details><summary>page-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/page\">page</a></li><li><a href=\"/en-US/docs/Web/CSS/page-break-after\">page-break-after</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/page-break-before\">page-break-before</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/page-break-inside\">page-break-inside</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/paint-order\">paint-order</a></li><li><a href=\"/en-US/docs/Web/CSS/perspective\">perspective</a></li><li><a href=\"/en-US/docs/Web/CSS/perspective-origin\">perspective-origin</a></li><li class=\"toggle\"><details><summary>place-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/place-content\">place-content</a></li><li><a href=\"/en-US/docs/Web/CSS/place-items\">place-items</a></li><li><a href=\"/en-US/docs/Web/CSS/place-self\">place-self</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/pointer-events\">pointer-events</a></li><li class=\"toggle\"><details><summary>position-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/position\">position</a></li><li><a href=\"/en-US/docs/Web/CSS/position-anchor\">position-anchor</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-area\">position-area</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try\">position-try</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try-fallbacks\">position-try-fallbacks</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try-order\">position-try-order</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-visibility\">position-visibility</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/print-color-adjust\">print-color-adjust</a></li><li><a href=\"/en-US/docs/Web/CSS/quotes\">quotes</a></li><li><a href=\"/en-US/docs/Web/CSS/r\">r</a></li><li><a href=\"/en-US/docs/Web/CSS/resize\">resize</a></li><li><a href=\"/en-US/docs/Web/CSS/right\">right</a></li><li><a href=\"/en-US/docs/Web/CSS/rotate\">rotate</a></li><li><a href=\"/en-US/docs/Web/CSS/row-gap\">row-gap</a></li><li><a href=\"/en-US/docs/Web/CSS/ruby-align\">ruby-align</a></li><li><a href=\"/en-US/docs/Web/CSS/ruby-position\">ruby-position</a></li><li><a href=\"/en-US/docs/Web/CSS/rx\">rx</a></li><li><a href=\"/en-US/docs/Web/CSS/ry\">ry</a></li><li><a href=\"/en-US/docs/Web/CSS/scale\">scale</a></li><li class=\"toggle\"><details><summary>scroll-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/scroll-behavior\">scroll-behavior</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin\">scroll-margin</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-block\">scroll-margin-block</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-block-end\">scroll-margin-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-block-start\">scroll-margin-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-bottom\">scroll-margin-bottom</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-inline\">scroll-margin-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-inline-end\">scroll-margin-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-inline-start\">scroll-margin-inline-start</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-left\">scroll-margin-left</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-right\">scroll-margin-right</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-margin-top\">scroll-margin-top</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding\">scroll-padding</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-block\">scroll-padding-block</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-block-end\">scroll-padding-block-end</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-block-start\">scroll-padding-block-start</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-bottom\">scroll-padding-bottom</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-inline\">scroll-padding-inline</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-inline-end\">scroll-padding-inline-end</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-inline-start\">scroll-padding-inline-start</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-left\">scroll-padding-left</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-right\">scroll-padding-right</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-padding-top\">scroll-padding-top</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-snap-align\">scroll-snap-align</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-snap-stop\">scroll-snap-stop</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-snap-type\">scroll-snap-type</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline\">scroll-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline-axis\">scroll-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline-name\">scroll-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>scrollbar-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/scrollbar-color\">scrollbar-color</a></li><li><a href=\"/en-US/docs/Web/CSS/scrollbar-gutter\">scrollbar-gutter</a></li><li><a href=\"/en-US/docs/Web/CSS/scrollbar-width\">scrollbar-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>shape-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/shape-image-threshold\">shape-image-threshold</a></li><li><a href=\"/en-US/docs/Web/CSS/shape-margin\">shape-margin</a></li><li><a href=\"/en-US/docs/Web/CSS/shape-outside\">shape-outside</a></li><li><a href=\"/en-US/docs/Web/CSS/shape-rendering\">shape-rendering</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/stop-color\">stop-color</a></li><li><a href=\"/en-US/docs/Web/CSS/stop-opacity\">stop-opacity</a></li><li class=\"toggle\"><details><summary>stroke-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/stroke\">stroke</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-dasharray\">stroke-dasharray</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-dashoffset\">stroke-dashoffset</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-linecap\">stroke-linecap</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-linejoin\">stroke-linejoin</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-miterlimit\">stroke-miterlimit</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-opacity\">stroke-opacity</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-width\">stroke-width</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/tab-size\">tab-size</a></li><li><a href=\"/en-US/docs/Web/CSS/table-layout\">table-layout</a></li><li class=\"toggle\"><details><summary>text-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/text-align\">text-align</a></li><li><a href=\"/en-US/docs/Web/CSS/text-align-last\">text-align-last</a></li><li><a href=\"/en-US/docs/Web/CSS/text-anchor\">text-anchor</a></li><li><a href=\"/en-US/docs/Web/CSS/text-combine-upright\">text-combine-upright</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration\">text-decoration</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-color\">text-decoration-color</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-line\">text-decoration-line</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-skip\">text-decoration-skip</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-skip-ink\">text-decoration-skip-ink</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-style\">text-decoration-style</a></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-thickness\">text-decoration-thickness</a></li><li><a href=\"/en-US/docs/Web/CSS/text-emphasis\">text-emphasis</a></li><li><a href=\"/en-US/docs/Web/CSS/text-emphasis-color\">text-emphasis-color</a></li><li><a href=\"/en-US/docs/Web/CSS/text-emphasis-position\">text-emphasis-position</a></li><li><a href=\"/en-US/docs/Web/CSS/text-emphasis-style\">text-emphasis-style</a></li><li><a href=\"/en-US/docs/Web/CSS/text-indent\">text-indent</a></li><li><a href=\"/en-US/docs/Web/CSS/text-justify\">text-justify</a></li><li><a href=\"/en-US/docs/Web/CSS/text-orientation\">text-orientation</a></li><li><a href=\"/en-US/docs/Web/CSS/text-overflow\">text-overflow</a></li><li><a href=\"/en-US/docs/Web/CSS/text-rendering\">text-rendering</a></li><li><a href=\"/en-US/docs/Web/CSS/text-shadow\">text-shadow</a></li><li><a href=\"/en-US/docs/Web/CSS/text-size-adjust\">text-size-adjust</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/text-spacing-trim\">text-spacing-trim</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/text-transform\">text-transform</a></li><li><a href=\"/en-US/docs/Web/CSS/text-underline-offset\">text-underline-offset</a></li><li><a href=\"/en-US/docs/Web/CSS/text-underline-position\">text-underline-position</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap\">text-wrap</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap-mode\">text-wrap-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap-style\">text-wrap-style</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/timeline-scope\">timeline-scope</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/top\">top</a></li><li><a href=\"/en-US/docs/Web/CSS/touch-action\">touch-action</a></li><li class=\"toggle\"><details><summary>transform-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/transform\">transform</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-box\">transform-box</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-origin\">transform-origin</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-style\">transform-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>transition-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/transition\">transition</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-behavior\">transition-behavior</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-delay\">transition-delay</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-duration\">transition-duration</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-property\">transition-property</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-timing-function\">transition-timing-function</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/translate\">translate</a></li><li><a href=\"/en-US/docs/Web/CSS/unicode-bidi\">unicode-bidi</a></li><li><a href=\"/en-US/docs/Web/CSS/user-modify\">user-modify</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/user-select\">user-select</a></li><li><a href=\"/en-US/docs/Web/CSS/vector-effect\">vector-effect</a></li><li><a href=\"/en-US/docs/Web/CSS/vertical-align\">vertical-align</a></li><li class=\"toggle\"><details><summary>view-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/view-timeline\">view-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-axis\">view-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-inset\">view-timeline-inset</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-name\">view-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-transition-name\">view-transition-name</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/visibility\">visibility</a></li><li><a href=\"/en-US/docs/Web/CSS/white-space\">white-space</a></li><li><a href=\"/en-US/docs/Web/CSS/white-space-collapse\">white-space-collapse</a></li><li><a href=\"/en-US/docs/Web/CSS/widows\">widows</a></li><li><a href=\"/en-US/docs/Web/CSS/width\">width</a></li><li><a href=\"/en-US/docs/Web/CSS/will-change\">will-change</a></li><li><a href=\"/en-US/docs/Web/CSS/word-break\">word-break</a></li><li><a href=\"/en-US/docs/Web/CSS/word-spacing\">word-spacing</a></li><li><a href=\"/en-US/docs/Web/CSS/writing-mode\">writing-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/x\">x</a></li><li><a href=\"/en-US/docs/Web/CSS/y\">y</a></li><li><a href=\"/en-US/docs/Web/CSS/z-index\">z-index</a></li><li><a href=\"/en-US/docs/Web/CSS/zoom\">zoom</a></li></ol></details></li><li class=\"toggle\"><details><summary>Selectors</summary><ol><li><a href=\"/en-US/docs/Web/CSS/Nesting_selector\">& nesting selector</a></li><li><a href=\"/en-US/docs/Web/CSS/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Web/CSS/Class_selectors\">Class selectors</a></li><li><a href=\"/en-US/docs/Web/CSS/ID_selectors\">ID selectors</a></li><li><a href=\"/en-US/docs/Web/CSS/Type_selectors\">Type selectors</a></li><li><a href=\"/en-US/docs/Web/CSS/Universal_selectors\">Universal selectors</a></li></ol></details></li><li class=\"toggle\"><details><summary>Combinators</summary><ol><li><a href=\"/en-US/docs/Web/CSS/Child_combinator\">Child combinator</a></li><li><a href=\"/en-US/docs/Web/CSS/Column_combinator\">Column combinator</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/Descendant_combinator\">Descendant combinator</a></li><li><a href=\"/en-US/docs/Web/CSS/Namespace_separator\">Namespace separator</a></li><li><a href=\"/en-US/docs/Web/CSS/Next-sibling_combinator\">Next-sibling combinator</a></li><li><a href=\"/en-US/docs/Web/CSS/Selector_list\">Selector list</a></li><li><a href=\"/en-US/docs/Web/CSS/Subsequent-sibling_combinator\">Subsequent-sibling combinator</a></li></ol></details></li><li class=\"toggle\"><details><summary>Pseudo-classes</summary><ol><li class=\"toggle\"><details><summary>:-moz-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/:-moz-broken\">:-moz-broken</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-drag-over\">:-moz-drag-over</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-first-node\">:-moz-first-node</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-blocked\">:-moz-handler-blocked</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-crashed\">:-moz-handler-crashed</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-disabled\">:-moz-handler-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-last-node\">:-moz-last-node</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-loading\">:-moz-loading</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-locale-dir_ltr\">:-moz-locale-dir(ltr)</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-locale-dir_rtl\">:-moz-locale-dir(rtl)</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-only-whitespace\">:-moz-only-whitespace</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-submit-invalid\">:-moz-submit-invalid</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-suppressed\">:-moz-suppressed</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-user-disabled\">:-moz-user-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-window-inactive\">:-moz-window-inactive</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/:active\">:active</a></li><li><a href=\"/en-US/docs/Web/CSS/:any-link\">:any-link</a></li><li><a href=\"/en-US/docs/Web/CSS/:autofill\">:autofill</a></li><li><a href=\"/en-US/docs/Web/CSS/:blank\">:blank</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:buffering\">:buffering</a></li><li><a href=\"/en-US/docs/Web/CSS/:checked\">:checked</a></li><li><a href=\"/en-US/docs/Web/CSS/:current\">:current</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:default\">:default</a></li><li><a href=\"/en-US/docs/Web/CSS/:defined\">:defined</a></li><li><a href=\"/en-US/docs/Web/CSS/:dir\">:dir()</a></li><li><a href=\"/en-US/docs/Web/CSS/:disabled\">:disabled</a></li><li><a href=\"/en-US/docs/Web/CSS/:empty\">:empty</a></li><li><a href=\"/en-US/docs/Web/CSS/:enabled\">:enabled</a></li><li class=\"toggle\"><details><summary>:first-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/:first\">:first</a></li><li><a href=\"/en-US/docs/Web/CSS/:first-child\">:first-child</a></li><li><a href=\"/en-US/docs/Web/CSS/:first-of-type\">:first-of-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>:focus-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/:focus\">:focus</a></li><li><a href=\"/en-US/docs/Web/CSS/:focus-visible\">:focus-visible</a></li><li><a href=\"/en-US/docs/Web/CSS/:focus-within\">:focus-within</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/:fullscreen\">:fullscreen</a></li><li><a href=\"/en-US/docs/Web/CSS/:future\">:future</a></li><li><a href=\"/en-US/docs/Web/CSS/:has-slotted\">:has-slotted</a></li><li><a href=\"/en-US/docs/Web/CSS/:has\">:has()</a></li><li><a href=\"/en-US/docs/Web/CSS/:host\">:host</a></li><li><a href=\"/en-US/docs/Web/CSS/:host-context\">:host-context()</a></li><li><a href=\"/en-US/docs/Web/CSS/:host_function\">:host()</a></li><li><a href=\"/en-US/docs/Web/CSS/:hover\">:hover</a></li><li><a href=\"/en-US/docs/Web/CSS/:in-range\">:in-range</a></li><li><a href=\"/en-US/docs/Web/CSS/:indeterminate\">:indeterminate</a></li><li><a href=\"/en-US/docs/Web/CSS/:invalid\">:invalid</a></li><li><a href=\"/en-US/docs/Web/CSS/:is\">:is()</a></li><li><a href=\"/en-US/docs/Web/CSS/:lang\">:lang()</a></li><li><a href=\"/en-US/docs/Web/CSS/:last-child\">:last-child</a></li><li><a href=\"/en-US/docs/Web/CSS/:last-of-type\">:last-of-type</a></li><li><a href=\"/en-US/docs/Web/CSS/:left\">:left</a></li><li><a href=\"/en-US/docs/Web/CSS/:link\">:link</a></li><li><a href=\"/en-US/docs/Web/CSS/:local-link\">:local-link</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:modal\">:modal</a></li><li><a href=\"/en-US/docs/Web/CSS/:muted\">:muted</a></li><li><a href=\"/en-US/docs/Web/CSS/:not\">:not()</a></li><li class=\"toggle\"><details><summary>:nth-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/:nth-child\">:nth-child()</a></li><li><a href=\"/en-US/docs/Web/CSS/:nth-last-child\">:nth-last-child()</a></li><li><a href=\"/en-US/docs/Web/CSS/:nth-last-of-type\">:nth-last-of-type()</a></li><li><a href=\"/en-US/docs/Web/CSS/:nth-of-type\">:nth-of-type()</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/:only-child\">:only-child</a></li><li><a href=\"/en-US/docs/Web/CSS/:only-of-type\">:only-of-type</a></li><li><a href=\"/en-US/docs/Web/CSS/:open\">:open</a></li><li><a href=\"/en-US/docs/Web/CSS/:optional\">:optional</a></li><li><a href=\"/en-US/docs/Web/CSS/:out-of-range\">:out-of-range</a></li><li><a href=\"/en-US/docs/Web/CSS/:past\">:past</a></li><li><a href=\"/en-US/docs/Web/CSS/:paused\">:paused</a></li><li><a href=\"/en-US/docs/Web/CSS/:picture-in-picture\">:picture-in-picture</a></li><li><a href=\"/en-US/docs/Web/CSS/:placeholder-shown\">:placeholder-shown</a></li><li><a href=\"/en-US/docs/Web/CSS/:playing\">:playing</a></li><li><a href=\"/en-US/docs/Web/CSS/:popover-open\">:popover-open</a></li><li><a href=\"/en-US/docs/Web/CSS/:read-only\">:read-only</a></li><li><a href=\"/en-US/docs/Web/CSS/:read-write\">:read-write</a></li><li><a href=\"/en-US/docs/Web/CSS/:required\">:required</a></li><li><a href=\"/en-US/docs/Web/CSS/:right\">:right</a></li><li><a href=\"/en-US/docs/Web/CSS/:root\">:root</a></li><li><a href=\"/en-US/docs/Web/CSS/:scope\">:scope</a></li><li><a href=\"/en-US/docs/Web/CSS/:seeking\">:seeking</a></li><li><a href=\"/en-US/docs/Web/CSS/:stalled\">:stalled</a></li><li><a href=\"/en-US/docs/Web/CSS/:state\">:state()</a></li><li><a href=\"/en-US/docs/Web/CSS/:target\">:target</a></li><li><a href=\"/en-US/docs/Web/CSS/:target-within\">:target-within</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:user-invalid\">:user-invalid</a></li><li><a href=\"/en-US/docs/Web/CSS/:user-valid\">:user-valid</a></li><li><a href=\"/en-US/docs/Web/CSS/:valid\">:valid</a></li><li><a href=\"/en-US/docs/Web/CSS/:visited\">:visited</a></li><li><a href=\"/en-US/docs/Web/CSS/:volume-locked\">:volume-locked</a></li><li><a href=\"/en-US/docs/Web/CSS/:where\">:where()</a></li></ol></details></li><li class=\"toggle\"><details><summary>Pseudo-elements</summary><ol><li class=\"toggle\"><details><summary>::-moz-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/::-moz-color-swatch\">::-moz-color-swatch</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-focus-inner\">::-moz-focus-inner</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-list-bullet\">::-moz-list-bullet</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-list-number\">::-moz-list-number</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-meter-bar\">::-moz-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-progress-bar\">::-moz-progress-bar</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-range-progress\">::-moz-range-progress</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-range-thumb\">::-moz-range-thumb</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-range-track\">::-moz-range-track</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>::-webkit-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/::-webkit-inner-spin-button\">::-webkit-inner-spin-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-bar\">::-webkit-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value\">::-webkit-meter-even-less-good-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-inner-element\">::-webkit-meter-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-optimum-value\">::-webkit-meter-optimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value\">::-webkit-meter-suboptimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-progress-bar\">::-webkit-progress-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-progress-inner-element\">::-webkit-progress-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-progress-value\">::-webkit-progress-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-scrollbar\">::-webkit-scrollbar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-search-cancel-button\">::-webkit-search-cancel-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-search-results-button\">::-webkit-search-results-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-slider-runnable-track\">::-webkit-slider-runnable-track</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-slider-thumb\">::-webkit-slider-thumb</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/::after\">::after</a></li><li><a href=\"/en-US/docs/Web/CSS/::backdrop\">::backdrop</a></li><li><a href=\"/en-US/docs/Web/CSS/::before\">::before</a></li><li><a href=\"/en-US/docs/Web/CSS/::cue\">::cue</a></li><li><a href=\"/en-US/docs/Web/CSS/::details-content\">::details-content</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::file-selector-button\">::file-selector-button</a></li><li><a href=\"/en-US/docs/Web/CSS/::first-letter\">::first-letter</a></li><li><a href=\"/en-US/docs/Web/CSS/::first-line\">::first-line</a></li><li><a href=\"/en-US/docs/Web/CSS/::grammar-error\">::grammar-error</a></li><li><a href=\"/en-US/docs/Web/CSS/::highlight\">::highlight()</a></li><li><a href=\"/en-US/docs/Web/CSS/::marker\">::marker</a></li><li><a href=\"/en-US/docs/Web/CSS/::part\">::part()</a></li><li><a href=\"/en-US/docs/Web/CSS/::placeholder\">::placeholder</a></li><li><a href=\"/en-US/docs/Web/CSS/::selection\">::selection</a></li><li><a href=\"/en-US/docs/Web/CSS/::slotted\">::slotted()</a></li><li><a href=\"/en-US/docs/Web/CSS/::spelling-error\">::spelling-error</a></li><li><a href=\"/en-US/docs/Web/CSS/::target-text\">::target-text</a></li><li class=\"toggle\"><details><summary>::view-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/::view-transition\">::view-transition</a></li><li><a href=\"/en-US/docs/Web/CSS/::view-transition-group\">::view-transition-group</a></li><li><a href=\"/en-US/docs/Web/CSS/::view-transition-image-pair\">::view-transition-image-pair</a></li><li><a href=\"/en-US/docs/Web/CSS/::view-transition-new\">::view-transition-new</a></li><li><a href=\"/en-US/docs/Web/CSS/::view-transition-old\">::view-transition-old</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary>At-rules</summary><ol><li><a href=\"/en-US/docs/Web/CSS/@charset\">@charset</a></li><li><a href=\"/en-US/docs/Web/CSS/@color-profile\">@color-profile</a></li><li><a href=\"/en-US/docs/Web/CSS/@container\">@container</a></li><li><a href=\"/en-US/docs/Web/CSS/@counter-style\">@counter-style</a></li><li><a href=\"/en-US/docs/Web/CSS/@document\">@document</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/@font-face\">@font-face</a></li><li><a href=\"/en-US/docs/Web/CSS/@font-feature-values\">@font-feature-values</a></li><li><a href=\"/en-US/docs/Web/CSS/@font-palette-values\">@font-palette-values</a></li><li><a href=\"/en-US/docs/Web/CSS/@import\">@import</a></li><li><a href=\"/en-US/docs/Web/CSS/@keyframes\">@keyframes</a></li><li><a href=\"/en-US/docs/Web/CSS/@layer\">@layer</a></li><li><a href=\"/en-US/docs/Web/CSS/@media\">@media</a></li><li><a href=\"/en-US/docs/Web/CSS/@namespace\">@namespace</a></li><li><a href=\"/en-US/docs/Web/CSS/@page\">@page</a></li><li><a href=\"/en-US/docs/Web/CSS/@position-try\">@position-try</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/@property\">@property</a></li><li><a href=\"/en-US/docs/Web/CSS/@scope\">@scope</a></li><li><a href=\"/en-US/docs/Web/CSS/@starting-style\">@starting-style</a></li><li><a href=\"/en-US/docs/Web/CSS/@supports\">@supports</a></li><li><a href=\"/en-US/docs/Web/CSS/@view-transition\">@view-transition</a></li></ol></details></li><li class=\"toggle\"><details><summary>Functions</summary><ol><li><a href=\"/en-US/docs/Web/CSS/-moz-image-rect\">-moz-image-rect</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n<span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/abs\">abs()</a></li><li><a href=\"/en-US/docs/Web/CSS/acos\">acos()</a></li><li><a href=\"/en-US/docs/Web/CSS/anchor-size\">anchor-size()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/anchor\">anchor()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/asin\">asin()</a></li><li><a href=\"/en-US/docs/Web/CSS/atan\">atan()</a></li><li><a href=\"/en-US/docs/Web/CSS/atan2\">atan2()</a></li><li><a href=\"/en-US/docs/Web/CSS/attr\">attr()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/blur\">blur()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/brightness\">brightness()</a></li><li><a href=\"/en-US/docs/Web/CSS/calc-size\">calc-size()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/calc\">calc()</a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/circle\">circle()</a></li><li><a href=\"/en-US/docs/Web/CSS/clamp\">clamp()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/color-mix\">color-mix()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/color\">color()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/conic-gradient\">conic-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/contrast\">contrast()</a></li><li><a href=\"/en-US/docs/Web/CSS/cos\">cos()</a></li><li><a href=\"/en-US/docs/Web/CSS/counter\">counter()</a></li><li><a href=\"/en-US/docs/Web/CSS/counters\">counters()</a></li><li><a href=\"/en-US/docs/Web/CSS/cross-fade\">cross-fade()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/cubic-bezier\">cubic-bezier()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/device-cmyk\">device-cmyk()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/drop-shadow\">drop-shadow()</a></li><li><a href=\"/en-US/docs/Web/CSS/element\">element()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/ellipse\">ellipse()</a></li><li><a href=\"/en-US/docs/Web/CSS/env\">env()</a></li><li><a href=\"/en-US/docs/Web/CSS/exp\">exp()</a></li><li><a href=\"/en-US/docs/Web/CSS/fit-content_function\">fit-content()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/grayscale\">grayscale()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/hsl\">hsl()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/hue-rotate\">hue-rotate()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/hwb\">hwb()</a></li><li><a href=\"/en-US/docs/Web/CSS/hypot\">hypot()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/image-set\">image-set()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/image\">image()</a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/inset\">inset()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/invert\">invert()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/lab\">lab()</a></li><li><a href=\"/en-US/docs/Web/CSS/@import/layer_function\">layer()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/lch\">lch()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/light-dark\">light-dark()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/linear-gradient\">linear-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/linear\">linear()</a></li><li><a href=\"/en-US/docs/Web/CSS/log\">log()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/matrix\">matrix()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/matrix3d\">matrix3d()</a></li><li><a href=\"/en-US/docs/Web/CSS/max\">max()</a></li><li><a href=\"/en-US/docs/Web/CSS/min\">min()</a></li><li><a href=\"/en-US/docs/Web/CSS/minmax\">minmax()</a></li><li><a href=\"/en-US/docs/Web/CSS/mod\">mod()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/oklab\">oklab()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/oklch\">oklch()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/opacity\">opacity()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/paint\">paint()</a></li><li><a href=\"/en-US/docs/Web/CSS/font-palette/palette-mix\">palette-mix()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/path\">path()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/perspective\">perspective()</a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/polygon\">polygon()</a></li><li><a href=\"/en-US/docs/Web/CSS/pow\">pow()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/radial-gradient\">radial-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/ray\">ray()</a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/rect\">rect()</a></li><li><a href=\"/en-US/docs/Web/CSS/rem\">rem()</a></li><li><a href=\"/en-US/docs/Web/CSS/repeat\">repeat()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/repeating-conic-gradient\">repeating-conic-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/repeating-linear-gradient\">repeating-linear-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/repeating-radial-gradient\">repeating-radial-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/rgb\">rgb()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/rotate\">rotate()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/rotate3d\">rotate3d()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/rotateX\">rotateX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/rotateY\">rotateY()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/rotateZ\">rotateZ()</a></li><li><a href=\"/en-US/docs/Web/CSS/round\">round()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/saturate\">saturate()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scale\">scale()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scale3d\">scale3d()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scaleX\">scaleX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scaleY\">scaleY()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scaleZ\">scaleZ()</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline/scroll\">scroll()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/sepia\">sepia()</a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/shape\">shape()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/sign\">sign()</a></li><li><a href=\"/en-US/docs/Web/CSS/sin\">sin()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/skew\">skew()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/skewX\">skewX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/skewY\">skewY()</a></li><li><a href=\"/en-US/docs/Web/CSS/sqrt\">sqrt()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/steps\">steps()</a></li><li><a href=\"/en-US/docs/Web/CSS/symbols\">symbols()</a></li><li><a href=\"/en-US/docs/Web/CSS/tan\">tan()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translate\">translate()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translate3d\">translate3d()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translateX\">translateX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translateY\">translateY()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translateZ\">translateZ()</a></li><li><a href=\"/en-US/docs/Web/CSS/url_function\">url()</a></li><li><a href=\"/en-US/docs/Web/CSS/var\">var()</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline/view\">view()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape/xywh\">xywh()</a></li></ol></details></li><li class=\"toggle\"><details><summary>Types</summary><ol><li><a href=\"/en-US/docs/Web/CSS/absolute-size\"><absolute-size></a></li><li><a href=\"/en-US/docs/Web/CSS/alpha-value\"><alpha-value></a></li><li><a href=\"/en-US/docs/Web/CSS/angle-percentage\"><angle-percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/angle\"><angle></a></li><li><a href=\"/en-US/docs/Web/CSS/baseline-position\"><baseline-position></a></li><li><a href=\"/en-US/docs/Web/CSS/basic-shape\"><basic-shape></a></li><li><a href=\"/en-US/docs/Web/CSS/blend-mode\"><blend-mode></a></li><li><a href=\"/en-US/docs/Web/CSS/box-edge\"><box-edge></a></li><li><a href=\"/en-US/docs/Web/CSS/calc-keyword\"><calc-keyword></a></li><li><a href=\"/en-US/docs/Web/CSS/calc-sum\"><calc-sum></a></li><li><a href=\"/en-US/docs/Web/CSS/color-interpolation-method\"><color-interpolation-method></a></li><li><a href=\"/en-US/docs/Web/CSS/color_value\"><color></a></li><li><a href=\"/en-US/docs/Web/CSS/content-distribution\"><content-distribution></a></li><li><a href=\"/en-US/docs/Web/CSS/content-position\"><content-position></a></li><li><a href=\"/en-US/docs/Web/CSS/custom-ident\"><custom-ident></a></li><li><a href=\"/en-US/docs/Web/CSS/dashed-ident\"><dashed-ident></a></li><li><a href=\"/en-US/docs/Web/CSS/dimension\"><dimension></a></li><li><a href=\"/en-US/docs/Web/CSS/display-box\"><display-box></a></li><li><a href=\"/en-US/docs/Web/CSS/display-inside\"><display-inside></a></li><li><a href=\"/en-US/docs/Web/CSS/display-internal\"><display-internal></a></li><li><a href=\"/en-US/docs/Web/CSS/display-legacy\"><display-legacy></a></li><li><a href=\"/en-US/docs/Web/CSS/display-listitem\"><display-listitem></a></li><li><a href=\"/en-US/docs/Web/CSS/display-outside\"><display-outside></a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function\"><easing-function></a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function\"><filter-function></a></li><li><a href=\"/en-US/docs/Web/CSS/flex_value\"><flex></a></li><li><a href=\"/en-US/docs/Web/CSS/frequency-percentage\"><frequency-percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/frequency\"><frequency></a></li><li><a href=\"/en-US/docs/Web/CSS/generic-family\"><generic-family></a></li><li><a href=\"/en-US/docs/Web/CSS/gradient\"><gradient></a></li><li><a href=\"/en-US/docs/Web/CSS/hex-color\"><hex-color></a></li><li><a href=\"/en-US/docs/Web/CSS/hue-interpolation-method\"><hue-interpolation-method></a></li><li><a href=\"/en-US/docs/Web/CSS/hue\"><hue></a></li><li><a href=\"/en-US/docs/Web/CSS/ident\"><ident></a></li><li><a href=\"/en-US/docs/Web/CSS/image\"><image></a></li><li><a href=\"/en-US/docs/Web/CSS/integer\"><integer></a></li><li><a href=\"/en-US/docs/Web/CSS/length-percentage\"><length-percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/length\"><length></a></li><li><a href=\"/en-US/docs/Web/CSS/line-style\"><line-style></a></li><li><a href=\"/en-US/docs/Web/CSS/named-color\"><named-color></a></li><li><a href=\"/en-US/docs/Web/CSS/number\"><number></a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-position\"><overflow-position></a></li><li><a href=\"/en-US/docs/Web/CSS/overflow_value\"><overflow></a></li><li><a href=\"/en-US/docs/Web/CSS/percentage\"><percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/position-area_value\"><position-area></a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position_value\"><position></a></li><li><a href=\"/en-US/docs/Web/CSS/ratio\"><ratio></a></li><li><a href=\"/en-US/docs/Web/CSS/relative-size\"><relative-size></a></li><li><a href=\"/en-US/docs/Web/CSS/resolution\"><resolution></a></li><li><a href=\"/en-US/docs/Web/CSS/self-position\"><self-position></a></li><li><a href=\"/en-US/docs/Web/CSS/shape\"><shape></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/string\"><string></a></li><li><a href=\"/en-US/docs/Web/CSS/system-color\"><system-color></a></li><li><a href=\"/en-US/docs/Web/CSS/time-percentage\"><time-percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/time\"><time></a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function\"><transform-function></a></li><li><a href=\"/en-US/docs/Web/CSS/url_value\"><url></a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Web/CSS/Guides\">Guides</a></li><li class=\"toggle\"><details><summary>Animations</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\">Using CSS animations</a></li></ol></details></li><li class=\"toggle\"><details><summary>Backgrounds and Borders</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds\">Using multiple backgrounds</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images\">Resizing background images</a></li></ol></details></li><li class=\"toggle\"><details><summary>Box alignment</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables\">Box alignment in block layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox\">Box alignment in flexbox</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout\">Box alignment in grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout\">Box alignment in multi-column layout</a></li></ol></details></li><li class=\"toggle\"><details><summary>Box model</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model\">Introduction to the CSS basic box model</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing\">Mastering margin collapsing</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary>Colors</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Applying_color\">Applying_color_to_HTML_elements</a></li><li><em><a href=\"/en-US/docs/Web/CSS/CSS_colors/Color_values\" aria-current=\"page\">Color values</a></em></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Relative_colors\">Using relative colors</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely\">Using color wisely</a></li><li><a href=\"/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance\">Accessibility_Understanding_colors_and_luminance</a></li><li><a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast\">Accessibility: Color contrast</a></li></ol></details></li><li class=\"toggle\"><details><summary>Columns</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts\">Basic concepts of multi-column layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns\">Styling columns</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns\">Spanning and balancing columns</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout\">Handling overflow in multi-column layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout\">Handling content breaks in multi-column layout</a></li></ol></details></li><li class=\"toggle\"><details><summary>Conditional rules</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries\">Using feature queries</a></li></ol></details></li><li class=\"toggle\"><details><summary>Containment</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment\">Using CSS containment</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_containment/Container_queries\">CSS container queries</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries\">Using container size and style queries</a></li></ol></details></li><li class=\"toggle\"><details><summary>CSSOM view</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems\">Coordinate systems</a></li></ol></details></li><li class=\"toggle\"><details><summary>Display</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow\">Block and inline layout in normal flow</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow\">In flow and out of flow</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts\">Introduction to formatting contexts</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes\">Flow layout and writing modes</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_overflow\">Flow layout and overflow</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display\">Using the multi-keyword syntax with CSS display</a></li></ol></details></li><li class=\"toggle\"><details><summary>Flexbox</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox\">Basic concepts of flexbox</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods\">Relationship of flexbox to other layout methods</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container\">Aligning items in a flex container</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items\">Ordering flex items</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis\">Controlling ratios of flex items along the main axis</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items\">Mastering wrapping of flex items</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox\">Typical use cases of flexbox</a></li></ol></details></li><li class=\"toggle\"><details><summary>Fonts</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide\">OpenType font features guide</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide\">Variable fonts guide</a></li></ol></details></li><li class=\"toggle\"><details><summary>Grid</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout\">Basic concepts of grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods\">Relationship of grid layout to other layout methods</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\">Grid layout using line-based placement</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas\">Grid template areas</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines\">Layout using named grid lines</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout\">Auto-placement in grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout\">Aligning items in CSS grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes\">Grids, logical values, and writing modes</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility\">Grid layout and accessibility</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids\">Realizing common layouts using grids</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid\">Subgrid</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout\">Masonry layout</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n<span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>Images</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients\">Using CSS gradients</a></li></ol></details></li><li class=\"toggle\"><details><summary>Lists and counters</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters\">Using CSS counters</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation\">Consistent list indentation</a></li></ol></details></li><li class=\"toggle\"><details><summary>Logical properties</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values\">Basic concepts of logical properties and values</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning\">Logical properties for floating and positioning</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding\">Logical properties for margins, borders, and padding</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Sizing\">Logical properties for sizing</a></li></ol></details></li><li class=\"toggle\"><details><summary>Math functions</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions\">Using CSS math functions</a></li></ol></details></li><li class=\"toggle\"><details><summary>Media queries</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries\">Using media queries</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility\">Using media queries for accessibility</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries\">Testing media queries programmatically</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries/Printing\">Printing</a></li></ol></details></li><li class=\"toggle\"><details><summary>Nesting style rules</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting\">Using CSS nesting</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules\">CSS nesting at-rules</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity\">CSS nesting and specificity</a></li></ol></details></li><li class=\"toggle\"><details><summary>Positioning</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index\">Understanding z-index</a></li></ol></details></li><li class=\"toggle\"><details><summary>Scroll snap</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts\">Basic concepts of scroll snap</a></li></ol></details></li><li class=\"toggle\"><details><summary>Shapes</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes\">Overview of shapes</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/From_box_values\">Shapes from box values</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes\">Basic shapes with shape-outside</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images\">Shapes from images</a></li></ol></details></li><li class=\"toggle\"><details><summary>Text</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text\">Wrapping and breaking text</a></li></ol></details></li><li class=\"toggle\"><details><summary>Transforms</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms\">Using CSS transforms</a></li></ol></details></li><li class=\"toggle\"><details><summary>Transitions</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions\">Using CSS transitions</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Web/CSS/Layout_cookbook\">CSS Layout cookbook</a></li><li class=\"toggle\"><ol><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Media_objects\">Recipe: Media objects</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts\">Column layouts</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element\">Center an element</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers\">Sticky footers</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation\">Split navigation</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation\">Breadcrumb navigation</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges\">List group with badges</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Pagination\">Pagination</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Card\">Card</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper\">Grid wrapper</a></li></ol></li><li class=\"section\">Tools</li><li class=\"toggle\"><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool\">Color picker tool</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator\">Box-shadow generator</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator\">Border-image generator</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator\">Border-radius generator</a></li></ol></li></ol>","source":{"folder":"en-us/web/css/css_colors/color_values","github_url":"https://github.com/mdn/content/blob/main/files/en-us/web/css/css_colors/color_values/index.md","last_commit_url":"https://github.com/mdn/content/commit/0a9c10fc67901972221dc7b3d006334fbfa73dce","filename":"index.md"},"summary":"To represent a color in CSS, you have to find a way to translate the analog concept of \"color\" into a digital form that a computer can use. This is typically done by breaking the color down into components, such as amounts of different primary colors to mix together, or brightness and hue. Defined color models ensure that colors will appear the same no matter where they are rendered.","title":"CSS color values","toc":[{"text":"Keywords","id":"keywords"},{"text":"RGB values","id":"rgb_values"},{"text":"Color functions with a hue component","id":"color_functions_with_a_hue_component"},{"text":"Lab and OKLab","id":"lab_and_oklab"},{"text":"Additional color functional notations","id":"additional_color_functional_notations"},{"text":"See also","id":"see_also"}],"pageType":"guide"}}</script></body></html>