Color & Backgrounds
background-color
Setting the background color of an element.
Overview
| Class | Declarations |
|---|---|
background-color:transparent | background-color: transparent;
|
bg-current | background-color: currentColor;
|
bg-black | background-color: oklch(0% 0 none);
|
bg-white | background-color: oklch(100% 0 none);
|
bg-stone | background-color: var(--color-stone);
|
bg-gray | background-color: var(--color-gray);
|
bg-neutral | background-color: var(--color-neutral);
|
bg-slate | background-color: var(--color-slate);
|
bg-brown | background-color: var(--color-brown);
|
bg-orange | background-color: var(--color-orange);
|
bg-amber | background-color: var(--color-amber);
|
bg-yellow | background-color: var(--color-yellow);
|
bg-lime | background-color: var(--color-lime);
|
bg-green | background-color: var(--color-green);
|
bg-beryl | background-color: var(--color-beryl);
|
bg-teal | background-color: var(--color-teal);
|
bg-cyan | background-color: var(--color-cyan);
|
bg-sky | background-color: var(--color-sky);
|
bg-blue | background-color: var(--color-blue);
|
bg-indigo | background-color: var(--color-indigo);
|
bg-violet | background-color: var(--color-violet);
|
bg-purple | background-color: var(--color-purple);
|
bg-fuchsia | background-color: var(--color-fuchsia);
|
bg-pink | background-color: var(--color-pink);
|
bg-crimson | background-color: var(--color-crimson);
|
bg-red | background-color: var(--color-red);
|
bg-stone-0 | background-color: var(--color-stone-0);
|
bg-stone-5 | background-color: var(--color-stone-5);
|
bg-stone-10 | background-color: var(--color-stone-10);
|
bg-stone-20 | background-color: var(--color-stone-20);
|
bg-stone-30 | background-color: var(--color-stone-30);
|
bg-stone-40 | background-color: var(--color-stone-40);
|
bg-stone-50 | background-color: var(--color-stone-50);
|
bg-stone-60 | background-color: var(--color-stone-60);
|
bg-stone-70 | background-color: var(--color-stone-70);
|
bg-stone-80 | background-color: var(--color-stone-80);
|
bg-stone-90 | background-color: var(--color-stone-90);
|
bg-stone-95 | background-color: var(--color-stone-95);
|
bg-stone-100 | background-color: var(--color-stone-100);
|
bg-gray-0 | background-color: var(--color-gray-0);
|
bg-gray-5 | background-color: var(--color-gray-5);
|
bg-gray-10 | background-color: var(--color-gray-10);
|
bg-gray-20 | background-color: var(--color-gray-20);
|
bg-gray-30 | background-color: var(--color-gray-30);
|
bg-gray-40 | background-color: var(--color-gray-40);
|
bg-gray-50 | background-color: var(--color-gray-50);
|
bg-gray-60 | background-color: var(--color-gray-60);
|
bg-gray-70 | background-color: var(--color-gray-70);
|
bg-gray-80 | background-color: var(--color-gray-80);
|
bg-gray-90 | background-color: var(--color-gray-90);
|
bg-gray-95 | background-color: var(--color-gray-95);
|
bg-gray-100 | background-color: var(--color-gray-100);
|
bg-neutral-0 | background-color: var(--color-neutral-0);
|
bg-neutral-5 | background-color: var(--color-neutral-5);
|
bg-neutral-10 | background-color: var(--color-neutral-10);
|
bg-neutral-20 | background-color: var(--color-neutral-20);
|
bg-neutral-30 | background-color: var(--color-neutral-30);
|
bg-neutral-40 | background-color: var(--color-neutral-40);
|
bg-neutral-50 | background-color: var(--color-neutral-50);
|
bg-neutral-60 | background-color: var(--color-neutral-60);
|
bg-neutral-70 | background-color: var(--color-neutral-70);
|
bg-neutral-80 | background-color: var(--color-neutral-80);
|
bg-neutral-90 | background-color: var(--color-neutral-90);
|
bg-neutral-95 | background-color: var(--color-neutral-95);
|
bg-neutral-100 | background-color: var(--color-neutral-100);
|
bg-slate-0 | background-color: var(--color-slate-0);
|
bg-slate-5 | background-color: var(--color-slate-5);
|
bg-slate-10 | background-color: var(--color-slate-10);
|
bg-slate-20 | background-color: var(--color-slate-20);
|
bg-slate-30 | background-color: var(--color-slate-30);
|
bg-slate-40 | background-color: var(--color-slate-40);
|
bg-slate-50 | background-color: var(--color-slate-50);
|
bg-slate-60 | background-color: var(--color-slate-60);
|
bg-slate-70 | background-color: var(--color-slate-70);
|
bg-slate-80 | background-color: var(--color-slate-80);
|
bg-slate-90 | background-color: var(--color-slate-90);
|
bg-slate-95 | background-color: var(--color-slate-95);
|
bg-slate-100 | background-color: var(--color-slate-100);
|
bg-brown-0 | background-color: var(--color-brown-0);
|
bg-brown-5 | background-color: var(--color-brown-5);
|
bg-brown-10 | background-color: var(--color-brown-10);
|
bg-brown-20 | background-color: var(--color-brown-20);
|
bg-brown-30 | background-color: var(--color-brown-30);
|
bg-brown-40 | background-color: var(--color-brown-40);
|
bg-brown-50 | background-color: var(--color-brown-50);
|
bg-brown-60 | background-color: var(--color-brown-60);
|
bg-brown-70 | background-color: var(--color-brown-70);
|
bg-brown-80 | background-color: var(--color-brown-80);
|
bg-brown-90 | background-color: var(--color-brown-90);
|
bg-brown-95 | background-color: var(--color-brown-95);
|
bg-brown-100 | background-color: var(--color-brown-100);
|
bg-orange-0 | background-color: var(--color-orange-0);
|
bg-orange-5 | background-color: var(--color-orange-5);
|
bg-orange-10 | background-color: var(--color-orange-10);
|
bg-orange-20 | background-color: var(--color-orange-20);
|
bg-orange-30 | background-color: var(--color-orange-30);
|
bg-orange-40 | background-color: var(--color-orange-40);
|
bg-orange-50 | background-color: var(--color-orange-50);
|
bg-orange-60 | background-color: var(--color-orange-60);
|
bg-orange-70 | background-color: var(--color-orange-70);
|
bg-orange-80 | background-color: var(--color-orange-80);
|
bg-orange-90 | background-color: var(--color-orange-90);
|
bg-orange-95 | background-color: var(--color-orange-95);
|
bg-orange-100 | background-color: var(--color-orange-100);
|
bg-amber-0 | background-color: var(--color-amber-0);
|
bg-amber-5 | background-color: var(--color-amber-5);
|
bg-amber-10 | background-color: var(--color-amber-10);
|
bg-amber-20 | background-color: var(--color-amber-20);
|
bg-amber-30 | background-color: var(--color-amber-30);
|
bg-amber-40 | background-color: var(--color-amber-40);
|
bg-amber-50 | background-color: var(--color-amber-50);
|
bg-amber-60 | background-color: var(--color-amber-60);
|
bg-amber-70 | background-color: var(--color-amber-70);
|
bg-amber-80 | background-color: var(--color-amber-80);
|
bg-amber-90 | background-color: var(--color-amber-90);
|
bg-amber-95 | background-color: var(--color-amber-95);
|
bg-amber-100 | background-color: var(--color-amber-100);
|
bg-yellow-0 | background-color: var(--color-yellow-0);
|
bg-yellow-5 | background-color: var(--color-yellow-5);
|
bg-yellow-10 | background-color: var(--color-yellow-10);
|
bg-yellow-20 | background-color: var(--color-yellow-20);
|
bg-yellow-30 | background-color: var(--color-yellow-30);
|
bg-yellow-40 | background-color: var(--color-yellow-40);
|
bg-yellow-50 | background-color: var(--color-yellow-50);
|
bg-yellow-60 | background-color: var(--color-yellow-60);
|
bg-yellow-70 | background-color: var(--color-yellow-70);
|
bg-yellow-80 | background-color: var(--color-yellow-80);
|
bg-yellow-90 | background-color: var(--color-yellow-90);
|
bg-yellow-95 | background-color: var(--color-yellow-95);
|
bg-yellow-100 | background-color: var(--color-yellow-100);
|
bg-lime-0 | background-color: var(--color-lime-0);
|
bg-lime-5 | background-color: var(--color-lime-5);
|
bg-lime-10 | background-color: var(--color-lime-10);
|
bg-lime-20 | background-color: var(--color-lime-20);
|
bg-lime-30 | background-color: var(--color-lime-30);
|
bg-lime-40 | background-color: var(--color-lime-40);
|
bg-lime-50 | background-color: var(--color-lime-50);
|
bg-lime-60 | background-color: var(--color-lime-60);
|
bg-lime-70 | background-color: var(--color-lime-70);
|
bg-lime-80 | background-color: var(--color-lime-80);
|
bg-lime-90 | background-color: var(--color-lime-90);
|
bg-lime-95 | background-color: var(--color-lime-95);
|
bg-lime-100 | background-color: var(--color-lime-100);
|
bg-green-0 | background-color: var(--color-green-0);
|
bg-green-5 | background-color: var(--color-green-5);
|
bg-green-10 | background-color: var(--color-green-10);
|
bg-green-20 | background-color: var(--color-green-20);
|
bg-green-30 | background-color: var(--color-green-30);
|
bg-green-40 | background-color: var(--color-green-40);
|
bg-green-50 | background-color: var(--color-green-50);
|
bg-green-60 | background-color: var(--color-green-60);
|
bg-green-70 | background-color: var(--color-green-70);
|
bg-green-80 | background-color: var(--color-green-80);
|
bg-green-90 | background-color: var(--color-green-90);
|
bg-green-95 | background-color: var(--color-green-95);
|
bg-green-100 | background-color: var(--color-green-100);
|
bg-beryl-0 | background-color: var(--color-beryl-0);
|
bg-beryl-5 | background-color: var(--color-beryl-5);
|
bg-beryl-10 | background-color: var(--color-beryl-10);
|
bg-beryl-20 | background-color: var(--color-beryl-20);
|
bg-beryl-30 | background-color: var(--color-beryl-30);
|
bg-beryl-40 | background-color: var(--color-beryl-40);
|
bg-beryl-50 | background-color: var(--color-beryl-50);
|
bg-beryl-60 | background-color: var(--color-beryl-60);
|
bg-beryl-70 | background-color: var(--color-beryl-70);
|
bg-beryl-80 | background-color: var(--color-beryl-80);
|
bg-beryl-90 | background-color: var(--color-beryl-90);
|
bg-beryl-95 | background-color: var(--color-beryl-95);
|
bg-beryl-100 | background-color: var(--color-beryl-100);
|
bg-teal-0 | background-color: var(--color-teal-0);
|
bg-teal-5 | background-color: var(--color-teal-5);
|
bg-teal-10 | background-color: var(--color-teal-10);
|
bg-teal-20 | background-color: var(--color-teal-20);
|
bg-teal-30 | background-color: var(--color-teal-30);
|
bg-teal-40 | background-color: var(--color-teal-40);
|
bg-teal-50 | background-color: var(--color-teal-50);
|
bg-teal-60 | background-color: var(--color-teal-60);
|
bg-teal-70 | background-color: var(--color-teal-70);
|
bg-teal-80 | background-color: var(--color-teal-80);
|
bg-teal-90 | background-color: var(--color-teal-90);
|
bg-teal-95 | background-color: var(--color-teal-95);
|
bg-teal-100 | background-color: var(--color-teal-100);
|
bg-cyan-0 | background-color: var(--color-cyan-0);
|
bg-cyan-5 | background-color: var(--color-cyan-5);
|
bg-cyan-10 | background-color: var(--color-cyan-10);
|
bg-cyan-20 | background-color: var(--color-cyan-20);
|
bg-cyan-30 | background-color: var(--color-cyan-30);
|
bg-cyan-40 | background-color: var(--color-cyan-40);
|
bg-cyan-50 | background-color: var(--color-cyan-50);
|
bg-cyan-60 | background-color: var(--color-cyan-60);
|
bg-cyan-70 | background-color: var(--color-cyan-70);
|
bg-cyan-80 | background-color: var(--color-cyan-80);
|
bg-cyan-90 | background-color: var(--color-cyan-90);
|
bg-cyan-95 | background-color: var(--color-cyan-95);
|
bg-cyan-100 | background-color: var(--color-cyan-100);
|
bg-sky-0 | background-color: var(--color-sky-0);
|
bg-sky-5 | background-color: var(--color-sky-5);
|
bg-sky-10 | background-color: var(--color-sky-10);
|
bg-sky-20 | background-color: var(--color-sky-20);
|
bg-sky-30 | background-color: var(--color-sky-30);
|
bg-sky-40 | background-color: var(--color-sky-40);
|
bg-sky-50 | background-color: var(--color-sky-50);
|
bg-sky-60 | background-color: var(--color-sky-60);
|
bg-sky-70 | background-color: var(--color-sky-70);
|
bg-sky-80 | background-color: var(--color-sky-80);
|
bg-sky-90 | background-color: var(--color-sky-90);
|
bg-sky-95 | background-color: var(--color-sky-95);
|
bg-sky-100 | background-color: var(--color-sky-100);
|
bg-blue-0 | background-color: var(--color-blue-0);
|
bg-blue-5 | background-color: var(--color-blue-5);
|
bg-blue-10 | background-color: var(--color-blue-10);
|
bg-blue-20 | background-color: var(--color-blue-20);
|
bg-blue-30 | background-color: var(--color-blue-30);
|
bg-blue-40 | background-color: var(--color-blue-40);
|
bg-blue-50 | background-color: var(--color-blue-50);
|
bg-blue-60 | background-color: var(--color-blue-60);
|
bg-blue-70 | background-color: var(--color-blue-70);
|
bg-blue-80 | background-color: var(--color-blue-80);
|
bg-blue-90 | background-color: var(--color-blue-90);
|
bg-blue-95 | background-color: var(--color-blue-95);
|
bg-blue-100 | background-color: var(--color-blue-100);
|
bg-indigo-0 | background-color: var(--color-indigo-0);
|
bg-indigo-5 | background-color: var(--color-indigo-5);
|
bg-indigo-10 | background-color: var(--color-indigo-10);
|
bg-indigo-20 | background-color: var(--color-indigo-20);
|
bg-indigo-30 | background-color: var(--color-indigo-30);
|
bg-indigo-40 | background-color: var(--color-indigo-40);
|
bg-indigo-50 | background-color: var(--color-indigo-50);
|
bg-indigo-60 | background-color: var(--color-indigo-60);
|
bg-indigo-70 | background-color: var(--color-indigo-70);
|
bg-indigo-80 | background-color: var(--color-indigo-80);
|
bg-indigo-90 | background-color: var(--color-indigo-90);
|
bg-indigo-95 | background-color: var(--color-indigo-95);
|
bg-indigo-100 | background-color: var(--color-indigo-100);
|
bg-violet-0 | background-color: var(--color-violet-0);
|
bg-violet-5 | background-color: var(--color-violet-5);
|
bg-violet-10 | background-color: var(--color-violet-10);
|
bg-violet-20 | background-color: var(--color-violet-20);
|
bg-violet-30 | background-color: var(--color-violet-30);
|
bg-violet-40 | background-color: var(--color-violet-40);
|
bg-violet-50 | background-color: var(--color-violet-50);
|
bg-violet-60 | background-color: var(--color-violet-60);
|
bg-violet-70 | background-color: var(--color-violet-70);
|
bg-violet-80 | background-color: var(--color-violet-80);
|
bg-violet-90 | background-color: var(--color-violet-90);
|
bg-violet-95 | background-color: var(--color-violet-95);
|
bg-violet-100 | background-color: var(--color-violet-100);
|
bg-purple-0 | background-color: var(--color-purple-0);
|
bg-purple-5 | background-color: var(--color-purple-5);
|
bg-purple-10 | background-color: var(--color-purple-10);
|
bg-purple-20 | background-color: var(--color-purple-20);
|
bg-purple-30 | background-color: var(--color-purple-30);
|
bg-purple-40 | background-color: var(--color-purple-40);
|
bg-purple-50 | background-color: var(--color-purple-50);
|
bg-purple-60 | background-color: var(--color-purple-60);
|
bg-purple-70 | background-color: var(--color-purple-70);
|
bg-purple-80 | background-color: var(--color-purple-80);
|
bg-purple-90 | background-color: var(--color-purple-90);
|
bg-purple-95 | background-color: var(--color-purple-95);
|
bg-purple-100 | background-color: var(--color-purple-100);
|
bg-fuchsia-0 | background-color: var(--color-fuchsia-0);
|
bg-fuchsia-5 | background-color: var(--color-fuchsia-5);
|
bg-fuchsia-10 | background-color: var(--color-fuchsia-10);
|
bg-fuchsia-20 | background-color: var(--color-fuchsia-20);
|
bg-fuchsia-30 | background-color: var(--color-fuchsia-30);
|
bg-fuchsia-40 | background-color: var(--color-fuchsia-40);
|
bg-fuchsia-50 | background-color: var(--color-fuchsia-50);
|
bg-fuchsia-60 | background-color: var(--color-fuchsia-60);
|
bg-fuchsia-70 | background-color: var(--color-fuchsia-70);
|
bg-fuchsia-80 | background-color: var(--color-fuchsia-80);
|
bg-fuchsia-90 | background-color: var(--color-fuchsia-90);
|
bg-fuchsia-95 | background-color: var(--color-fuchsia-95);
|
bg-fuchsia-100 | background-color: var(--color-fuchsia-100);
|
bg-pink-0 | background-color: var(--color-pink-0);
|
bg-pink-5 | background-color: var(--color-pink-5);
|
bg-pink-10 | background-color: var(--color-pink-10);
|
bg-pink-20 | background-color: var(--color-pink-20);
|
bg-pink-30 | background-color: var(--color-pink-30);
|
bg-pink-40 | background-color: var(--color-pink-40);
|
bg-pink-50 | background-color: var(--color-pink-50);
|
bg-pink-60 | background-color: var(--color-pink-60);
|
bg-pink-70 | background-color: var(--color-pink-70);
|
bg-pink-80 | background-color: var(--color-pink-80);
|
bg-pink-90 | background-color: var(--color-pink-90);
|
bg-pink-95 | background-color: var(--color-pink-95);
|
bg-pink-100 | background-color: var(--color-pink-100);
|
bg-crimson-0 | background-color: var(--color-crimson-0);
|
bg-crimson-5 | background-color: var(--color-crimson-5);
|
bg-crimson-10 | background-color: var(--color-crimson-10);
|
bg-crimson-20 | background-color: var(--color-crimson-20);
|
bg-crimson-30 | background-color: var(--color-crimson-30);
|
bg-crimson-40 | background-color: var(--color-crimson-40);
|
bg-crimson-50 | background-color: var(--color-crimson-50);
|
bg-crimson-60 | background-color: var(--color-crimson-60);
|
bg-crimson-70 | background-color: var(--color-crimson-70);
|
bg-crimson-80 | background-color: var(--color-crimson-80);
|
bg-crimson-90 | background-color: var(--color-crimson-90);
|
bg-crimson-95 | background-color: var(--color-crimson-95);
|
bg-crimson-100 | background-color: var(--color-crimson-100);
|
bg-red-0 | background-color: var(--color-red-0);
|
bg-red-5 | background-color: var(--color-red-5);
|
bg-red-10 | background-color: var(--color-red-10);
|
bg-red-20 | background-color: var(--color-red-20);
|
bg-red-30 | background-color: var(--color-red-30);
|
bg-red-40 | background-color: var(--color-red-40);
|
bg-red-50 | background-color: var(--color-red-50);
|
bg-red-60 | background-color: var(--color-red-60);
|
bg-red-70 | background-color: var(--color-red-70);
|
bg-red-80 | background-color: var(--color-red-80);
|
bg-red-90 | background-color: var(--color-red-90);
|
bg-red-95 | background-color: var(--color-red-95);
|
bg-red-100 | background-color: var(--color-red-100);
|
bg-sand-0 | background-color: var(--color-sand-0);
|
bg-sand-5 | background-color: var(--color-sand-5);
|
bg-sand-10 | background-color: var(--color-sand-10);
|
bg-sand-20 | background-color: var(--color-sand-20);
|
bg-sand-30 | background-color: var(--color-sand-30);
|
bg-sand-40 | background-color: var(--color-sand-40);
|
bg-sand-50 | background-color: var(--color-sand-50);
|
bg-sand-60 | background-color: var(--color-sand-60);
|
bg-sand-70 | background-color: var(--color-sand-70);
|
bg-sand-80 | background-color: var(--color-sand-80);
|
bg-sand-90 | background-color: var(--color-sand-90);
|
bg-sand-95 | background-color: var(--color-sand-95);
|
bg-sand-100 | background-color: var(--color-sand-100);
|
bg-taupe-0 | background-color: var(--color-taupe-0);
|
bg-taupe-5 | background-color: var(--color-taupe-5);
|
bg-taupe-10 | background-color: var(--color-taupe-10);
|
bg-taupe-20 | background-color: var(--color-taupe-20);
|
bg-taupe-30 | background-color: var(--color-taupe-30);
|
bg-taupe-40 | background-color: var(--color-taupe-40);
|
bg-taupe-50 | background-color: var(--color-taupe-50);
|
bg-taupe-60 | background-color: var(--color-taupe-60);
|
bg-taupe-70 | background-color: var(--color-taupe-70);
|
bg-taupe-80 | background-color: var(--color-taupe-80);
|
bg-taupe-90 | background-color: var(--color-taupe-90);
|
bg-taupe-95 | background-color: var(--color-taupe-95);
|
bg-taupe-100 | background-color: var(--color-taupe-100);
|
bg-olive-0 | background-color: var(--color-olive-0);
|
bg-olive-5 | background-color: var(--color-olive-5);
|
bg-olive-10 | background-color: var(--color-olive-10);
|
bg-olive-20 | background-color: var(--color-olive-20);
|
bg-olive-30 | background-color: var(--color-olive-30);
|
bg-olive-40 | background-color: var(--color-olive-40);
|
bg-olive-50 | background-color: var(--color-olive-50);
|
bg-olive-60 | background-color: var(--color-olive-60);
|
bg-olive-70 | background-color: var(--color-olive-70);
|
bg-olive-80 | background-color: var(--color-olive-80);
|
bg-olive-90 | background-color: var(--color-olive-90);
|
bg-olive-95 | background-color: var(--color-olive-95);
|
bg-olive-100 | background-color: var(--color-olive-100);
|
bg-sage-0 | background-color: var(--color-sage-0);
|
bg-sage-5 | background-color: var(--color-sage-5);
|
bg-sage-10 | background-color: var(--color-sage-10);
|
bg-sage-20 | background-color: var(--color-sage-20);
|
bg-sage-30 | background-color: var(--color-sage-30);
|
bg-sage-40 | background-color: var(--color-sage-40);
|
bg-sage-50 | background-color: var(--color-sage-50);
|
bg-sage-60 | background-color: var(--color-sage-60);
|
bg-sage-70 | background-color: var(--color-sage-70);
|
bg-sage-80 | background-color: var(--color-sage-80);
|
bg-sage-90 | background-color: var(--color-sage-90);
|
bg-sage-95 | background-color: var(--color-sage-95);
|
bg-sage-100 | background-color: var(--color-sage-100);
|
bg-moss-0 | background-color: var(--color-moss-0);
|
bg-moss-5 | background-color: var(--color-moss-5);
|
bg-moss-10 | background-color: var(--color-moss-10);
|
bg-moss-20 | background-color: var(--color-moss-20);
|
bg-moss-30 | background-color: var(--color-moss-30);
|
bg-moss-40 | background-color: var(--color-moss-40);
|
bg-moss-50 | background-color: var(--color-moss-50);
|
bg-moss-60 | background-color: var(--color-moss-60);
|
bg-moss-70 | background-color: var(--color-moss-70);
|
bg-moss-80 | background-color: var(--color-moss-80);
|
bg-moss-90 | background-color: var(--color-moss-90);
|
bg-moss-95 | background-color: var(--color-moss-95);
|
bg-moss-100 | background-color: var(--color-moss-100);
|
bg-petrol-0 | background-color: var(--color-petrol-0);
|
bg-petrol-5 | background-color: var(--color-petrol-5);
|
bg-petrol-10 | background-color: var(--color-petrol-10);
|
bg-petrol-20 | background-color: var(--color-petrol-20);
|
bg-petrol-30 | background-color: var(--color-petrol-30);
|
bg-petrol-40 | background-color: var(--color-petrol-40);
|
bg-petrol-50 | background-color: var(--color-petrol-50);
|
bg-petrol-60 | background-color: var(--color-petrol-60);
|
bg-petrol-70 | background-color: var(--color-petrol-70);
|
bg-petrol-80 | background-color: var(--color-petrol-80);
|
bg-petrol-90 | background-color: var(--color-petrol-90);
|
bg-petrol-95 | background-color: var(--color-petrol-95);
|
bg-petrol-100 | background-color: var(--color-petrol-100);
|
bg-copper-0 | background-color: var(--color-copper-0);
|
bg-copper-5 | background-color: var(--color-copper-5);
|
bg-copper-10 | background-color: var(--color-copper-10);
|
bg-copper-20 | background-color: var(--color-copper-20);
|
bg-copper-30 | background-color: var(--color-copper-30);
|
bg-copper-40 | background-color: var(--color-copper-40);
|
bg-copper-50 | background-color: var(--color-copper-50);
|
bg-copper-60 | background-color: var(--color-copper-60);
|
bg-copper-70 | background-color: var(--color-copper-70);
|
bg-copper-80 | background-color: var(--color-copper-80);
|
bg-copper-90 | background-color: var(--color-copper-90);
|
bg-copper-95 | background-color: var(--color-copper-95);
|
bg-copper-100 | background-color: var(--color-copper-100);
|
bg-terracotta-0 | background-color: var(--color-terracotta-0);
|
bg-terracotta-5 | background-color: var(--color-terracotta-5);
|
bg-terracotta-10 | background-color: var(--color-terracotta-10);
|
bg-terracotta-20 | background-color: var(--color-terracotta-20);
|
bg-terracotta-30 | background-color: var(--color-terracotta-30);
|
bg-terracotta-40 | background-color: var(--color-terracotta-40);
|
bg-terracotta-50 | background-color: var(--color-terracotta-50);
|
bg-terracotta-60 | background-color: var(--color-terracotta-60);
|
bg-terracotta-70 | background-color: var(--color-terracotta-70);
|
bg-terracotta-80 | background-color: var(--color-terracotta-80);
|
bg-terracotta-90 | background-color: var(--color-terracotta-90);
|
bg-terracotta-95 | background-color: var(--color-terracotta-95);
|
bg-terracotta-100 | background-color: var(--color-terracotta-100);
|
background-color:<color> | background-color: <color>;
|
Basic usage
With opacity
Append /alpha to make just the background paint translucent. The split backing surface shows through the half-alpha sample; the foreground remains fully opaque.
With opacity
The backing surface belongs to the authored example. Background alpha changes the paint without reducing the element’s opacity.
<!-- Opaque background --><section class="p-md background-image:linear-gradient(90deg,transparent|50%,var(--color-surface-muted)|50%)"> <div id="target" class="w:100% p-lg bg-blue-50 text-body"> <span class="p-xs bg-surface-base text-body">Foreground stays opaque</span> </div></section><!-- 50% background alpha --><section class="p-md background-image:linear-gradient(90deg,transparent|50%,var(--color-surface-muted)|50%)"> <div id="target" class="w:100% p-lg bg-blue-50/.5 text-body"> <span class="p-xs bg-surface-base text-body">Foreground stays opaque</span> </div></section>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .bg-blue-50\/\.5 { background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent) } .bg-blue-50 { background-color: var(--color-blue-50) }}A background alpha does not dim text or child elements. Opacity composites the entire element. Use palette colors for a specific shade or a theme-aware semantic color such as bg-blue.
Apply conditionally
Hover or focus the button to add a translucent background. Its label and focus ring remain visible in both themes; print removes the tint.
Apply conditionally
The backing surface belongs to the authored example. Background alpha changes the paint without reducing the element’s opacity.
<!-- Pointer and keyboard · background only --><button id="target" type="button" class="font-md bg-surface-base text-body background-color:transparent@print bg-blue-50/.15:hover@screen bg-blue-50/.15:focus-visible@screen">Preview details</button>Keep an explicit text color when changing a surface; alpha alone does not guarantee readable contrast.