Text Decoration Color

Set the color for text decorations.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

tdc-red-1

text-decoration-color: #fbdfe1;

tdc-red-2

text-decoration-color: #f8c4c8;

tdc-red-3

text-decoration-color: #f4a8ae;

tdc-red-4

text-decoration-color: #f18c94;

tdc-red-5

text-decoration-color: #ed707a;

tdc-red-6

text-decoration-color: #ea5560;

tdc-red

text-decoration-color: #e63946;

tdc-red-7

text-decoration-color: #c6313c;

tdc-red-8

text-decoration-color: #a62932;

tdc-red-9

text-decoration-color: #852129;

tdc-red-10

text-decoration-color: #65191f;

tdc-red-11

text-decoration-color: #451115;

tdc-red-12

text-decoration-color: #25090b;

tdc-orange-1

text-decoration-color: #ffe7df;

tdc-orange-2

text-decoration-color: #ffd3c2;

tdc-orange-3

text-decoration-color: #ffbea6;

tdc-orange-4

text-decoration-color: #ffa98a;

tdc-orange-5

text-decoration-color: #ff946e;

tdc-orange-6

text-decoration-color: #ff8051;

tdc-orange

text-decoration-color: #ff6b35;

tdc-orange-7

text-decoration-color: #db5c2e;

tdc-orange-8

text-decoration-color: #b84d26;

tdc-orange-9

text-decoration-color: #943e1f;

tdc-orange-10

text-decoration-color: #702f17;

tdc-orange-11

text-decoration-color: #4d2010;

tdc-orange-12

text-decoration-color: #291108;

tdc-yellow-1

text-decoration-color: #fff4db;

tdc-yellow-2

text-decoration-color: #ffeabb;

tdc-yellow-3

text-decoration-color: #ffe09b;

tdc-yellow-4

text-decoration-color: #ffd67b;

tdc-yellow-5

text-decoration-color: #ffcc5c;

tdc-yellow-6

text-decoration-color: #ffc23c;

tdc-yellow

text-decoration-color: #ffb81c;

tdc-yellow-7

text-decoration-color: #db9e18;

tdc-yellow-8

text-decoration-color: #b88414;

tdc-yellow-9

text-decoration-color: #946b10;

tdc-yellow-10

text-decoration-color: #70510c;

tdc-yellow-11

text-decoration-color: #4d3708;

tdc-yellow-12

text-decoration-color: #291d04;

tdc-lime-1

text-decoration-color: #ebf7da;

tdc-lime-2

text-decoration-color: #daf0b9;

tdc-lime-3

text-decoration-color: #c9e998;

tdc-lime-4

text-decoration-color: #b8e178;

tdc-lime-5

text-decoration-color: #a6da57;

tdc-lime-6

text-decoration-color: #95d337;

tdc-lime

text-decoration-color: #84cc16;

tdc-lime-7

text-decoration-color: #72af13;

tdc-lime-8

text-decoration-color: #5f9310;

tdc-lime-9

text-decoration-color: #4d760d;

tdc-lime-10

text-decoration-color: #3a5a0a;

tdc-lime-11

text-decoration-color: #283d07;

tdc-lime-12

text-decoration-color: #152104;

tdc-mint-1

text-decoration-color: #d9f4eb;

tdc-mint-2

text-decoration-color: #b7ead9;

tdc-mint-3

text-decoration-color: #96e0c8;

tdc-mint-4

text-decoration-color: #74d6b6;

tdc-mint-5

text-decoration-color: #53cda4;

tdc-mint-6

text-decoration-color: #31c393;

tdc-mint

text-decoration-color: #10b981;

tdc-mint-7

text-decoration-color: #0e9f6f;

tdc-mint-8

text-decoration-color: #0c855d;

tdc-mint-9

text-decoration-color: #096b4b;

tdc-mint-10

text-decoration-color: #075139;

tdc-mint-11

text-decoration-color: #053827;

tdc-mint-12

text-decoration-color: #031e15;

tdc-green-1

text-decoration-color: #d7f8f0;

tdc-green-2

text-decoration-color: #b4f3e3;

tdc-green-3

text-decoration-color: #91edd5;

tdc-green-4

text-decoration-color: #6fe7c8;

tdc-green-5

text-decoration-color: #4ce1bb;

tdc-green-6

text-decoration-color: #29dcad;

tdc-green

text-decoration-color: #06d6a0;

tdc-green-7

text-decoration-color: #05b88a;

tdc-green-8

text-decoration-color: #049a73;

tdc-green-9

text-decoration-color: #037c5d;

tdc-green-10

text-decoration-color: #035e46;

tdc-green-11

text-decoration-color: #024030;

tdc-green-12

text-decoration-color: #01221a;

tdc-cyan-1

text-decoration-color: #d7f3f8;

tdc-cyan-2

text-decoration-color: #b4e9f2;

tdc-cyan-3

text-decoration-color: #91dfec;

tdc-cyan-4

text-decoration-color: #6fd5e6;

tdc-cyan-5

text-decoration-color: #4ccae0;

tdc-cyan-6

text-decoration-color: #29c0da;

tdc-cyan

text-decoration-color: #06b6d4;

tdc-cyan-7

text-decoration-color: #059db6;

tdc-cyan-8

text-decoration-color: #048399;

tdc-cyan-9

text-decoration-color: #036a7b;

tdc-cyan-10

text-decoration-color: #03505d;

tdc-cyan-11

text-decoration-color: #023740;

tdc-cyan-12

text-decoration-color: #011d22;

tdc-sky-1

text-decoration-color: #dff4fe;

tdc-sky-2

text-decoration-color: #c3ebfd;

tdc-sky-3

text-decoration-color: #a7e2fc;

tdc-sky-4

text-decoration-color: #8cd9fb;

tdc-sky-5

text-decoration-color: #70cffa;

tdc-sky-6

text-decoration-color: #54c6f9;

tdc-sky

text-decoration-color: #38bdf8;

tdc-sky-7

text-decoration-color: #30a3d5;

tdc-sky-8

text-decoration-color: #2888b3;

tdc-sky-9

text-decoration-color: #206e90;

tdc-sky-10

text-decoration-color: #19536d;

tdc-sky-11

text-decoration-color: #11394a;

tdc-sky-12

text-decoration-color: #091e28;

tdc-blue-1

text-decoration-color: #dce6fc;

tdc-blue-2

text-decoration-color: #bed0f9;

tdc-blue-3

text-decoration-color: #9fbaf6;

tdc-blue-4

text-decoration-color: #81a5f3;

tdc-blue-5

text-decoration-color: #628ff1;

tdc-blue-6

text-decoration-color: #4479ee;

tdc-blue

text-decoration-color: #2563eb;

tdc-blue-7

text-decoration-color: #2055ca;

tdc-blue-8

text-decoration-color: #1b47a9;

tdc-blue-9

text-decoration-color: #153988;

tdc-blue-10

text-decoration-color: #102c67;

tdc-blue-11

text-decoration-color: #0b1e47;

tdc-blue-12

text-decoration-color: #061026;

tdc-indigo-1

text-decoration-color: #e6e7fd;

tdc-indigo-2

text-decoration-color: #d0d1fb;

tdc-indigo-3

text-decoration-color: #babcf9;

tdc-indigo-4

text-decoration-color: #a5a6f7;

tdc-indigo-5

text-decoration-color: #8f91f5;

tdc-indigo-6

text-decoration-color: #797bf3;

tdc-indigo

text-decoration-color: #6366f1;

tdc-indigo-7

text-decoration-color: #5558cf;

tdc-indigo-8

text-decoration-color: #4749ae;

tdc-indigo-9

text-decoration-color: #393b8c;

tdc-indigo-10

text-decoration-color: #2c2d6a;

tdc-indigo-11

text-decoration-color: #1e1f48;

tdc-indigo-12

text-decoration-color: #101027;

tdc-violet-1

text-decoration-color: #ece5fe;

tdc-violet-2

text-decoration-color: #dccefc;

tdc-violet-3

text-decoration-color: #ccb7fb;

tdc-violet-4

text-decoration-color: #bca0fa;

tdc-violet-5

text-decoration-color: #ab8af9;

tdc-violet-6

text-decoration-color: #9b73f7;

tdc-violet

text-decoration-color: #8b5cf6;

tdc-violet-7

text-decoration-color: #784fd4;

tdc-violet-8

text-decoration-color: #6442b1;

tdc-violet-9

text-decoration-color: #51358f;

tdc-violet-10

text-decoration-color: #3d286c;

tdc-violet-11

text-decoration-color: #2a1c4a;

tdc-violet-12

text-decoration-color: #160f27;

tdc-lavender-1

text-decoration-color: #f1ecfe;

tdc-lavender-2

text-decoration-color: #e5dcfe;

tdc-lavender-3

text-decoration-color: #d8ccfd;

tdc-lavender-4

text-decoration-color: #ccbcfc;

tdc-lavender-5

text-decoration-color: #c0abfb;

tdc-lavender-6

text-decoration-color: #b39bfb;

tdc-lavender

text-decoration-color: #a78bfa;

tdc-lavender-7

text-decoration-color: #9078d7;

tdc-lavender-8

text-decoration-color: #7864b4;

tdc-lavender-9

text-decoration-color: #615191;

tdc-lavender-10

text-decoration-color: #493d6e;

tdc-lavender-11

text-decoration-color: #322a4b;

tdc-lavender-12

text-decoration-color: #1b1628;

tdc-magenta-1

text-decoration-color: #f9e1fc;

tdc-magenta-2

text-decoration-color: #f4c8fa;

tdc-magenta-3

text-decoration-color: #eeaef8;

tdc-magenta-4

text-decoration-color: #e994f6;

tdc-magenta-5

text-decoration-color: #e47af3;

tdc-magenta-6

text-decoration-color: #de60f1;

tdc-magenta

text-decoration-color: #d946ef;

tdc-magenta-7

text-decoration-color: #bb3cce;

tdc-magenta-8

text-decoration-color: #9c32ac;

tdc-magenta-9

text-decoration-color: #7e298b;

tdc-magenta-10

text-decoration-color: #5f1f69;

tdc-magenta-11

text-decoration-color: #411548;

tdc-magenta-12

text-decoration-color: #230b26;

tdc-pink-1

text-decoration-color: #fce2ef;

tdc-pink-2

text-decoration-color: #f9c8e0;

tdc-pink-3

text-decoration-color: #f7aed2;

tdc-pink-4

text-decoration-color: #f495c4;

tdc-pink-5

text-decoration-color: #f17bb6;

tdc-pink-6

text-decoration-color: #ef62a7;

tdc-pink

text-decoration-color: #ec4899;

tdc-pink-7

text-decoration-color: #cb3e84;

tdc-pink-8

text-decoration-color: #aa346e;

tdc-pink-9

text-decoration-color: #892a59;

tdc-pink-10

text-decoration-color: #682043;

tdc-pink-11

text-decoration-color: #47162e;

tdc-pink-12

text-decoration-color: #260c18;

tdc-coral-1

text-decoration-color: #ffe8ed;

tdc-coral-2

text-decoration-color: #ffd4de;

tdc-coral-3

text-decoration-color: #ffc0cf;

tdc-coral-4

text-decoration-color: #ffabbf;

tdc-coral-5

text-decoration-color: #ff97b0;

tdc-coral-6

text-decoration-color: #ff83a0;

tdc-coral

text-decoration-color: #ff6f91;

tdc-coral-7

text-decoration-color: #db5f7d;

tdc-coral-8

text-decoration-color: #b85068;

tdc-coral-9

text-decoration-color: #944054;

tdc-coral-10

text-decoration-color: #703140;

tdc-coral-11

text-decoration-color: #4d212c;

tdc-coral-12

text-decoration-color: #291217;

tdc-zinc-1

text-decoration-color: #e3e3e5;

tdc-zinc-2

text-decoration-color: #cbcbce;

tdc-zinc-3

text-decoration-color: #b3b3b7;

tdc-zinc-4

text-decoration-color: #9b9ba0;

tdc-zinc-5

text-decoration-color: #828289;

tdc-zinc-6

text-decoration-color: #6a6a72;

tdc-zinc

text-decoration-color: #52525b;

tdc-zinc-7

text-decoration-color: #47474e;

tdc-zinc-8

text-decoration-color: #3b3b42;

tdc-zinc-9

text-decoration-color: #303035;

tdc-zinc-10

text-decoration-color: #242428;

tdc-zinc-11

text-decoration-color: #19191b;

tdc-zinc-12

text-decoration-color: #0d0d0f;

tdc-gray-1

text-decoration-color: #e7e8eb;

tdc-gray-2

text-decoration-color: #d3d5d9;

tdc-gray-3

text-decoration-color: #bec1c7;

tdc-gray-4

text-decoration-color: #a9adb5;

tdc-gray-5

text-decoration-color: #9499a4;

tdc-gray-6

text-decoration-color: #808692;

tdc-gray

text-decoration-color: #6b7280;

tdc-gray-7

text-decoration-color: #5c626e;

tdc-gray-8

text-decoration-color: #4d525c;

tdc-gray-9

text-decoration-color: #3e424a;

tdc-gray-10

text-decoration-color: #2f3238;

tdc-gray-11

text-decoration-color: #202226;

tdc-gray-12

text-decoration-color: #111214;

tdc-slate-1

text-decoration-color: #e6e9ec;

tdc-slate-2

text-decoration-color: #d1d5dc;

tdc-slate-3

text-decoration-color: #bbc2cc;

tdc-slate-4

text-decoration-color: #a5aebc;

tdc-slate-5

text-decoration-color: #8f9bab;

tdc-slate-6

text-decoration-color: #7a879b;

tdc-slate

text-decoration-color: #64748b;

tdc-slate-7

text-decoration-color: #566478;

tdc-slate-8

text-decoration-color: #485464;

tdc-slate-9

text-decoration-color: #3a4351;

tdc-slate-10

text-decoration-color: #2c333d;

tdc-slate-11

text-decoration-color: #1e232a;

tdc-slate-12

text-decoration-color: #101316;

tdc-silver-1

text-decoration-color: #eff0f2;

tdc-silver-2

text-decoration-color: #e1e3e7;

tdc-silver-3

text-decoration-color: #d3d7dc;

tdc-silver-4

text-decoration-color: #c6cad1;

tdc-silver-5

text-decoration-color: #b8bdc5;

tdc-silver-6

text-decoration-color: #aab0ba;

tdc-silver

text-decoration-color: #9ca3af;

tdc-silver-7

text-decoration-color: #868c97;

tdc-silver-8

text-decoration-color: #70757e;

tdc-silver-9

text-decoration-color: #5a5f66;

tdc-silver-10

text-decoration-color: #45484d;

tdc-silver-11

text-decoration-color: #2f3135;

tdc-silver-12

text-decoration-color: #191a1c;

tdc-black

text-decoration-color: #000000;

tdc-current

text-decoration-color: currentColor;

tdc-transparent

text-decoration-color: transparent;

tdc-white

text-decoration-color: #ffffff;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:tdc-(value)

Small≥640px

md:tdc-(value)

Medium≥768px

lg:tdc-(value)

Large≥1024px

xxl:tdc-(value)

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:tdc-(value)

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Append /(opacity) to any color utility to control its transparency level.

Syntax:tdc-(color)/(opacity)

Text Decoration Color

Widely available

tdc-(value)251 utilities

Responsiveness

Hover State

Opacity Modifiers