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
090 - Text Wrap
🔥 100 - Popover
🔥 110 - scroll-driven animations
999 - Playground
Loading ...
CSS
: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
<div class="blocks"> <div class="block-1"></div> <div class="block-mix"></div> <div class="block-2"></div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container