Home
001 - Basic
002 - Variables
003 - Layer
004 - Nested Rules
010 - Grid
011 - Grid Complex
012 - Grid Contents
013 - Grid Logos
014 - Grid Spanning
020 - Container
021 - Container Style Queries
030 - Focus Visible
031 - Focus Within
040 - Color Scheme
041 - Color Light-Dark
042 - Color Mix
043 - Color Mix Mixer
044 - Color Mix Palette
045 - Relative Color
046 - Relative Color Palette
050 - Mask Image
051 - Background Clip Text
060 - Accent Color
070 - Has
071 - Starting Style
072 - Transition Behavior
073 - Anchor Position
090 - Text Wrap
100 - Popover
101 - Details Element
110 - Scroll Driven Animations
120 - Customizable Select
999 - Playground
Loading ...
CSS
-a
+A
:root { --mix-colorspace: srgb; --text-color-1-value: yellow; --text-color-1-percent: 50%; --text-color-2-value: cyan; --text-color-2-percent: 50%; } .blocks { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 300px; } .block-1 { background: var(--text-color-1-value); } .block-2 { background: var(--text-color-2-value); } .block-mix { background: color-mix( in var(--mix-colorspace), var(--text-color-1-value) var(--text-color-1-percent), var(--text-color-2-value) var(--text-color-2-percent) ); }
HTML
-a
+A
<div class="blocks"> <div class="block-1"></div> <div class="block-mix"></div> <div class="block-2"></div> </div>
Off
1/2
1/1
2/1
Zoom
Document
Container