Syntax
background-color
Setting the background color of an element.
Overview
Class | Declarations |
---|---|
bg:color | background-color: color;
|
bg:transparent | background-color: transparent;
|
bg:current | background-color: currentColor;
|
bg:black | background-color: rgb(0 0 0);
|
bg:white | background-color: rgb(255 255 255);
|
bg:base | background-color: rgb(var(--base));
|
bg:invert | background-color: rgb(var(--invert));
|
bg:gray | background-color: rgb(var(--gray));
|
bg:slate | background-color: rgb(var(--slate));
|
bg:brown | background-color: rgb(var(--brown));
|
bg:orange | background-color: rgb(var(--orange));
|
bg:amber | background-color: rgb(var(--amber));
|
bg:yellow | background-color: rgb(var(--yellow));
|
bg:lime | background-color: rgb(var(--lime));
|
bg:green | background-color: rgb(var(--green));
|
bg:beryl | background-color: rgb(var(--beryl));
|
bg:teal | background-color: rgb(var(--teal));
|
bg:cyan | background-color: rgb(var(--cyan));
|
bg:sky | background-color: rgb(var(--sky));
|
bg:blue | background-color: rgb(var(--blue));
|
bg:indigo | background-color: rgb(var(--indigo));
|
bg:violet | background-color: rgb(var(--violet));
|
bg:purple | background-color: rgb(var(--purple));
|
bg:fuchsia | background-color: rgb(var(--fuchsia));
|
bg:pink | background-color: rgb(var(--pink));
|
bg:crimson | background-color: rgb(var(--crimson));
|
bg:red | background-color: rgb(var(--red));
|
bg:gray-5 | background-color: rgb(246 245 247);
|
bg:gray-10 | background-color: rgb(239 238 240);
|
bg:gray-20 | background-color: rgb(205 204 206);
|
bg:gray-30 | background-color: rgb(162 161 163);
|
bg:gray-40 | background-color: rgb(137 136 138);
|
bg:gray-50 | background-color: rgb(115 114 116);
|
bg:gray-60 | background-color: rgb(88 87 89);
|
bg:gray-70 | background-color: rgb(68 67 69);
|
bg:gray-80 | background-color: rgb(50 49 51);
|
bg:gray-90 | background-color: rgb(41 40 42);
|
bg:gray-95 | background-color: rgb(34 33 35);
|
bg:slate-5 | background-color: rgb(248 249 251);
|
bg:slate-10 | background-color: rgb(239 242 249);
|
bg:slate-20 | background-color: rgb(200 208 227);
|
bg:slate-30 | background-color: rgb(159 171 198);
|
bg:slate-40 | background-color: rgb(124 140 171);
|
bg:slate-50 | background-color: rgb(95 115 149);
|
bg:slate-60 | background-color: rgb(69 85 114);
|
bg:slate-70 | background-color: rgb(55 69 93);
|
bg:slate-80 | background-color: rgb(40 51 72);
|
bg:slate-90 | background-color: rgb(29 39 58);
|
bg:slate-95 | background-color: rgb(24 32 48);
|
bg:brown-5 | background-color: rgb(255 246 240);
|
bg:brown-10 | background-color: rgb(254 239 227);
|
bg:brown-20 | background-color: rgb(243 190 164);
|
bg:brown-30 | background-color: rgb(231 151 110);
|
bg:brown-40 | background-color: rgb(218 124 77);
|
bg:brown-50 | background-color: rgb(204 102 51);
|
bg:brown-60 | background-color: rgb(182 83 37);
|
bg:brown-70 | background-color: rgb(157 65 25);
|
bg:brown-80 | background-color: rgb(131 49 17);
|
bg:brown-90 | background-color: rgb(105 32 7);
|
bg:brown-95 | background-color: rgb(67 19 4);
|
bg:orange-5 | background-color: rgb(255 245 234);
|
bg:orange-10 | background-color: rgb(255 245 223);
|
bg:orange-20 | background-color: rgb(255 203 158);
|
bg:orange-30 | background-color: rgb(255 155 71);
|
bg:orange-40 | background-color: rgb(255 133 40);
|
bg:orange-50 | background-color: rgb(255 108 10);
|
bg:orange-60 | background-color: rgb(224 82 0);
|
bg:orange-70 | background-color: rgb(188 62 0);
|
bg:orange-80 | background-color: rgb(153 45 0);
|
bg:orange-90 | background-color: rgb(112 29 0);
|
bg:orange-95 | background-color: rgb(71 17 0);
|
bg:amber-5 | background-color: rgb(255 249 235);
|
bg:amber-10 | background-color: rgb(255 244 219);
|
bg:amber-20 | background-color: rgb(255 224 153);
|
bg:amber-30 | background-color: rgb(255 193 51);
|
bg:amber-40 | background-color: rgb(255 177 10);
|
bg:amber-50 | background-color: rgb(249 158 0);
|
bg:amber-60 | background-color: rgb(229 126 0);
|
bg:amber-70 | background-color: rgb(193 93 0);
|
bg:amber-80 | background-color: rgb(163 73 0);
|
bg:amber-90 | background-color: rgb(117 50 0);
|
bg:amber-95 | background-color: rgb(76 31 0);
|
bg:yellow-5 | background-color: rgb(255 250 229);
|
bg:yellow-10 | background-color: rgb(255 254 209);
|
bg:yellow-20 | background-color: rgb(255 233 147);
|
bg:yellow-30 | background-color: rgb(255 210 51);
|
bg:yellow-40 | background-color: rgb(255 195 0);
|
bg:yellow-50 | background-color: rgb(239 175 0);
|
bg:yellow-60 | background-color: rgb(214 146 0);
|
bg:yellow-70 | background-color: rgb(183 116 0);
|
bg:yellow-80 | background-color: rgb(158 92 0);
|
bg:yellow-90 | background-color: rgb(117 60 0);
|
bg:yellow-95 | background-color: rgb(76 38 0);
|
bg:lime-5 | background-color: rgb(245 255 229);
|
bg:lime-10 | background-color: rgb(245 255 214);
|
bg:lime-20 | background-color: rgb(209 251 141);
|
bg:lime-30 | background-color: rgb(172 236 70);
|
bg:lime-40 | background-color: rgb(145 217 26);
|
bg:lime-50 | background-color: rgb(119 192 18);
|
bg:lime-60 | background-color: rgb(97 166 12);
|
bg:lime-70 | background-color: rgb(76 141 7);
|
bg:lime-80 | background-color: rgb(54 118 4);
|
bg:lime-90 | background-color: rgb(37 96 0);
|
bg:lime-95 | background-color: rgb(27 61 0);
|
bg:green-5 | background-color: rgb(231 253 234);
|
bg:green-10 | background-color: rgb(219 254 228);
|
bg:green-20 | background-color: rgb(165 247 184);
|
bg:green-30 | background-color: rgb(53 237 102);
|
bg:green-40 | background-color: rgb(0 214 85);
|
bg:green-50 | background-color: rgb(0 193 71);
|
bg:green-60 | background-color: rgb(0 173 63);
|
bg:green-70 | background-color: rgb(0 142 52);
|
bg:green-80 | background-color: rgb(0 122 44);
|
bg:green-90 | background-color: rgb(0 96 35);
|
bg:green-95 | background-color: rgb(0 61 22);
|
bg:beryl-5 | background-color: rgb(224 254 242);
|
bg:beryl-10 | background-color: rgb(210 255 247);
|
bg:beryl-20 | background-color: rgb(108 255 212);
|
bg:beryl-30 | background-color: rgb(15 239 164);
|
bg:beryl-40 | background-color: rgb(4 224 158);
|
bg:beryl-50 | background-color: rgb(4 203 143);
|
bg:beryl-60 | background-color: rgb(0 178 119);
|
bg:beryl-70 | background-color: rgb(0 147 96);
|
bg:beryl-80 | background-color: rgb(0 127 80);
|
bg:beryl-90 | background-color: rgb(0 102 62);
|
bg:beryl-95 | background-color: rgb(0 61 36);
|
bg:teal-5 | background-color: rgb(219 254 253);
|
bg:teal-10 | background-color: rgb(207 255 255);
|
bg:teal-20 | background-color: rgb(127 255 246);
|
bg:teal-30 | background-color: rgb(0 244 228);
|
bg:teal-40 | background-color: rgb(0 228 212);
|
bg:teal-50 | background-color: rgb(0 204 200);
|
bg:teal-60 | background-color: rgb(0 174 183);
|
bg:teal-70 | background-color: rgb(0 146 163);
|
bg:teal-80 | background-color: rgb(0 121 142);
|
bg:teal-90 | background-color: rgb(0 93 117);
|
bg:teal-95 | background-color: rgb(0 55 71);
|
bg:cyan-5 | background-color: rgb(224 255 255);
|
bg:cyan-10 | background-color: rgb(209 255 255);
|
bg:cyan-20 | background-color: rgb(127 246 255);
|
bg:cyan-30 | background-color: rgb(30 225 255);
|
bg:cyan-40 | background-color: rgb(0 204 249);
|
bg:cyan-50 | background-color: rgb(0 179 234);
|
bg:cyan-60 | background-color: rgb(0 153 214);
|
bg:cyan-70 | background-color: rgb(0 125 188);
|
bg:cyan-80 | background-color: rgb(0 103 168);
|
bg:cyan-90 | background-color: rgb(0 80 137);
|
bg:cyan-95 | background-color: rgb(0 49 86);
|
bg:sky-5 | background-color: rgb(229 245 255);
|
bg:sky-10 | background-color: rgb(217 248 255);
|
bg:sky-20 | background-color: rgb(163 222 255);
|
bg:sky-30 | background-color: rgb(107 198 255);
|
bg:sky-40 | background-color: rgb(52 178 253);
|
bg:sky-50 | background-color: rgb(5 159 255);
|
bg:sky-60 | background-color: rgb(0 141 249);
|
bg:sky-70 | background-color: rgb(0 115 224);
|
bg:sky-80 | background-color: rgb(0 92 198);
|
bg:sky-90 | background-color: rgb(0 65 163);
|
bg:sky-95 | background-color: rgb(0 37 102);
|
bg:blue-5 | background-color: rgb(229 243 254);
|
bg:blue-10 | background-color: rgb(219 242 254);
|
bg:blue-20 | background-color: rgb(173 215 255);
|
bg:blue-30 | background-color: rgb(112 176 255);
|
bg:blue-40 | background-color: rgb(76 147 253);
|
bg:blue-50 | background-color: rgb(58 124 255);
|
bg:blue-60 | background-color: rgb(37 99 253);
|
bg:blue-70 | background-color: rgb(27 83 236);
|
bg:blue-80 | background-color: rgb(25 71 209);
|
bg:blue-90 | background-color: rgb(23 53 162);
|
bg:blue-95 | background-color: rgb(16 32 105);
|
bg:indigo-5 | background-color: rgb(240 241 254);
|
bg:indigo-10 | background-color: rgb(233 236 254);
|
bg:indigo-20 | background-color: rgb(200 205 254);
|
bg:indigo-30 | background-color: rgb(147 158 255);
|
bg:indigo-40 | background-color: rgb(126 129 254);
|
bg:indigo-50 | background-color: rgb(112 104 255);
|
bg:indigo-60 | background-color: rgb(91 76 253);
|
bg:indigo-70 | background-color: rgb(78 57 237);
|
bg:indigo-80 | background-color: rgb(71 50 210);
|
bg:indigo-90 | background-color: rgb(54 35 163);
|
bg:indigo-95 | background-color: rgb(38 23 108);
|
bg:violet-5 | background-color: rgb(242 239 255);
|
bg:violet-10 | background-color: rgb(239 232 255);
|
bg:violet-20 | background-color: rgb(215 197 255);
|
bg:violet-30 | background-color: rgb(177 152 254);
|
bg:violet-40 | background-color: rgb(154 112 255);
|
bg:violet-50 | background-color: rgb(142 86 254);
|
bg:violet-60 | background-color: rgb(129 47 255);
|
bg:violet-70 | background-color: rgb(116 7 242);
|
bg:violet-80 | background-color: rgb(100 5 209);
|
bg:violet-90 | background-color: rgb(79 5 163);
|
bg:violet-95 | background-color: rgb(53 3 110);
|
bg:purple-5 | background-color: rgb(246 240 255);
|
bg:purple-10 | background-color: rgb(246 232 254);
|
bg:purple-20 | background-color: rgb(226 191 254);
|
bg:purple-30 | background-color: rgb(196 146 253);
|
bg:purple-40 | background-color: rgb(178 102 255);
|
bg:purple-50 | background-color: rgb(168 73 254);
|
bg:purple-60 | background-color: rgb(149 20 255);
|
bg:purple-70 | background-color: rgb(130 0 229);
|
bg:purple-80 | background-color: rgb(113 0 193);
|
bg:purple-90 | background-color: rgb(88 0 142);
|
bg:purple-95 | background-color: rgb(62 0 96);
|
bg:fuchsia-5 | background-color: rgb(250 240 255);
|
bg:fuchsia-10 | background-color: rgb(253 232 254);
|
bg:fuchsia-20 | background-color: rgb(240 186 255);
|
bg:fuchsia-30 | background-color: rgb(221 137 254);
|
bg:fuchsia-40 | background-color: rgb(215 96 254);
|
bg:fuchsia-50 | background-color: rgb(207 51 255);
|
bg:fuchsia-60 | background-color: rgb(183 0 229);
|
bg:fuchsia-70 | background-color: rgb(162 0 198);
|
bg:fuchsia-80 | background-color: rgb(135 0 163);
|
bg:fuchsia-90 | background-color: rgb(102 1 117);
|
bg:fuchsia-95 | background-color: rgb(72 0 81);
|
bg:pink-5 | background-color: rgb(254 241 249);
|
bg:pink-10 | background-color: rgb(254 233 248);
|
bg:pink-20 | background-color: rgb(255 184 223);
|
bg:pink-30 | background-color: rgb(249 134 193);
|
bg:pink-40 | background-color: rgb(250 101 178);
|
bg:pink-50 | background-color: rgb(247 71 162);
|
bg:pink-60 | background-color: rgb(239 33 136);
|
bg:pink-70 | background-color: rgb(214 22 115);
|
bg:pink-80 | background-color: rgb(184 12 92);
|
bg:pink-90 | background-color: rgb(143 5 67);
|
bg:pink-95 | background-color: rgb(100 3 47);
|
bg:crimson-5 | background-color: rgb(255 239 242);
|
bg:crimson-10 | background-color: rgb(255 232 236);
|
bg:crimson-20 | background-color: rgb(255 186 199);
|
bg:crimson-30 | background-color: rgb(255 132 157);
|
bg:crimson-40 | background-color: rgb(255 102 132);
|
bg:crimson-50 | background-color: rgb(252 64 101);
|
bg:crimson-60 | background-color: rgb(237 42 81);
|
bg:crimson-70 | background-color: rgb(215 23 62);
|
bg:crimson-80 | background-color: rgb(187 21 54);
|
bg:crimson-90 | background-color: rgb(143 19 44);
|
bg:crimson-95 | background-color: rgb(98 14 31);
|
bg:red-5 | background-color: rgb(255 239 239);
|
bg:red-10 | background-color: rgb(254 232 232);
|
bg:red-20 | background-color: rgb(255 188 188);
|
bg:red-30 | background-color: rgb(255 135 135);
|
bg:red-40 | background-color: rgb(253 95 95);
|
bg:red-50 | background-color: rgb(247 63 63);
|
bg:red-60 | background-color: rgb(229 46 46);
|
bg:red-70 | background-color: rgb(208 27 27);
|
bg:red-80 | background-color: rgb(184 25 25);
|
bg:red-90 | background-color: rgb(146 21 21);
|
bg:red-95 | background-color: rgb(101 15 15);
|
Basic usage
With opacity
Add the suffix /alpha
to change the opacity of any color.
<div class="bg:pink/.15">…</div>
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="bg:slate-10:hover bg:slate-10@sm bg:slate-10@dark bg:slate-10@print">…</div>