Skip to main content

Caret Color

Set the color for text input cursors.

Widely available

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

Chrome
Edge
Firefox
Safari

cc:red-1
caret-color: #fbdfe1;
cc:red-2
caret-color: #f8c4c8;
cc:red-3
caret-color: #f4a8ae;
cc:red-4
caret-color: #f18c94;
cc:red-5
caret-color: #ed707a;
cc:red-6
caret-color: #ea5560;
cc:red
caret-color: #e63946;
cc:red-7
caret-color: #c6313c;
cc:red-8
caret-color: #a62932;
cc:red-9
caret-color: #852129;
cc:red-10
caret-color: #65191f;
cc:red-11
caret-color: #451115;
cc:red-12
caret-color: #25090b;
cc:orange-1
caret-color: #ffe7df;
cc:orange-2
caret-color: #ffd3c2;
cc:orange-3
caret-color: #ffbea6;
cc:orange-4
caret-color: #ffa98a;
cc:orange-5
caret-color: #ff946e;
cc:orange-6
caret-color: #ff8051;
cc:orange
caret-color: #ff6b35;
cc:orange-7
caret-color: #db5c2e;
cc:orange-8
caret-color: #b84d26;
cc:orange-9
caret-color: #943e1f;
cc:orange-10
caret-color: #702f17;
cc:orange-11
caret-color: #4d2010;
cc:orange-12
caret-color: #291108;
cc:yellow-1
caret-color: #fff4db;
cc:yellow-2
caret-color: #ffeabb;
cc:yellow-3
caret-color: #ffe09b;
cc:yellow-4
caret-color: #ffd67b;
cc:yellow-5
caret-color: #ffcc5c;
cc:yellow-6
caret-color: #ffc23c;
cc:yellow
caret-color: #ffb81c;
cc:yellow-7
caret-color: #db9e18;
cc:yellow-8
caret-color: #b88414;
cc:yellow-9
caret-color: #946b10;
cc:yellow-10
caret-color: #70510c;
cc:yellow-11
caret-color: #4d3708;
cc:yellow-12
caret-color: #291d04;
cc:lime-1
caret-color: #ebf7da;
cc:lime-2
caret-color: #daf0b9;
cc:lime-3
caret-color: #c9e998;
cc:lime-4
caret-color: #b8e178;
cc:lime-5
caret-color: #a6da57;
cc:lime-6
caret-color: #95d337;
cc:lime
caret-color: #84cc16;
cc:lime-7
caret-color: #72af13;
cc:lime-8
caret-color: #5f9310;
cc:lime-9
caret-color: #4d760d;
cc:lime-10
caret-color: #3a5a0a;
cc:lime-11
caret-color: #283d07;
cc:lime-12
caret-color: #152104;
cc:mint-1
caret-color: #d9f4eb;
cc:mint-2
caret-color: #b7ead9;
cc:mint-3
caret-color: #96e0c8;
cc:mint-4
caret-color: #74d6b6;
cc:mint-5
caret-color: #53cda4;
cc:mint-6
caret-color: #31c393;
cc:mint
caret-color: #10b981;
cc:mint-7
caret-color: #0e9f6f;
cc:mint-8
caret-color: #0c855d;
cc:mint-9
caret-color: #096b4b;
cc:mint-10
caret-color: #075139;
cc:mint-11
caret-color: #053827;
cc:mint-12
caret-color: #031e15;
cc:green-1
caret-color: #d7f8f0;
cc:green-2
caret-color: #b4f3e3;
cc:green-3
caret-color: #91edd5;
cc:green-4
caret-color: #6fe7c8;
cc:green-5
caret-color: #4ce1bb;
cc:green-6
caret-color: #29dcad;
cc:green
caret-color: #06d6a0;
cc:green-7
caret-color: #05b88a;
cc:green-8
caret-color: #049a73;
cc:green-9
caret-color: #037c5d;
cc:green-10
caret-color: #035e46;
cc:green-11
caret-color: #024030;
cc:green-12
caret-color: #01221a;
cc:cyan-1
caret-color: #d7f3f8;
cc:cyan-2
caret-color: #b4e9f2;
cc:cyan-3
caret-color: #91dfec;
cc:cyan-4
caret-color: #6fd5e6;
cc:cyan-5
caret-color: #4ccae0;
cc:cyan-6
caret-color: #29c0da;
cc:cyan
caret-color: #06b6d4;
cc:cyan-7
caret-color: #059db6;
cc:cyan-8
caret-color: #048399;
cc:cyan-9
caret-color: #036a7b;
cc:cyan-10
caret-color: #03505d;
cc:cyan-11
caret-color: #023740;
cc:cyan-12
caret-color: #011d22;
cc:sky-1
caret-color: #dff4fe;
cc:sky-2
caret-color: #c3ebfd;
cc:sky-3
caret-color: #a7e2fc;
cc:sky-4
caret-color: #8cd9fb;
cc:sky-5
caret-color: #70cffa;
cc:sky-6
caret-color: #54c6f9;
cc:sky
caret-color: #38bdf8;
cc:sky-7
caret-color: #30a3d5;
cc:sky-8
caret-color: #2888b3;
cc:sky-9
caret-color: #206e90;
cc:sky-10
caret-color: #19536d;
cc:sky-11
caret-color: #11394a;
cc:sky-12
caret-color: #091e28;
cc:blue-1
caret-color: #dce6fc;
cc:blue-2
caret-color: #bed0f9;
cc:blue-3
caret-color: #9fbaf6;
cc:blue-4
caret-color: #81a5f3;
cc:blue-5
caret-color: #628ff1;
cc:blue-6
caret-color: #4479ee;
cc:blue
caret-color: #2563eb;
cc:blue-7
caret-color: #2055ca;
cc:blue-8
caret-color: #1b47a9;
cc:blue-9
caret-color: #153988;
cc:blue-10
caret-color: #102c67;
cc:blue-11
caret-color: #0b1e47;
cc:blue-12
caret-color: #061026;
cc:indigo-1
caret-color: #e6e7fd;
cc:indigo-2
caret-color: #d0d1fb;
cc:indigo-3
caret-color: #babcf9;
cc:indigo-4
caret-color: #a5a6f7;
cc:indigo-5
caret-color: #8f91f5;
cc:indigo-6
caret-color: #797bf3;
cc:indigo
caret-color: #6366f1;
cc:indigo-7
caret-color: #5558cf;
cc:indigo-8
caret-color: #4749ae;
cc:indigo-9
caret-color: #393b8c;
cc:indigo-10
caret-color: #2c2d6a;
cc:indigo-11
caret-color: #1e1f48;
cc:indigo-12
caret-color: #101027;
cc:violet-1
caret-color: #ece5fe;
cc:violet-2
caret-color: #dccefc;
cc:violet-3
caret-color: #ccb7fb;
cc:violet-4
caret-color: #bca0fa;
cc:violet-5
caret-color: #ab8af9;
cc:violet-6
caret-color: #9b73f7;
cc:violet
caret-color: #8b5cf6;
cc:violet-7
caret-color: #784fd4;
cc:violet-8
caret-color: #6442b1;
cc:violet-9
caret-color: #51358f;
cc:violet-10
caret-color: #3d286c;
cc:violet-11
caret-color: #2a1c4a;
cc:violet-12
caret-color: #160f27;
cc:lavender-1
caret-color: #f1ecfe;
cc:lavender-2
caret-color: #e5dcfe;
cc:lavender-3
caret-color: #d8ccfd;
cc:lavender-4
caret-color: #ccbcfc;
cc:lavender-5
caret-color: #c0abfb;
cc:lavender-6
caret-color: #b39bfb;
cc:lavender
caret-color: #a78bfa;
cc:lavender-7
caret-color: #9078d7;
cc:lavender-8
caret-color: #7864b4;
cc:lavender-9
caret-color: #615191;
cc:lavender-10
caret-color: #493d6e;
cc:lavender-11
caret-color: #322a4b;
cc:lavender-12
caret-color: #1b1628;
cc:magenta-1
caret-color: #f9e1fc;
cc:magenta-2
caret-color: #f4c8fa;
cc:magenta-3
caret-color: #eeaef8;
cc:magenta-4
caret-color: #e994f6;
cc:magenta-5
caret-color: #e47af3;
cc:magenta-6
caret-color: #de60f1;
cc:magenta
caret-color: #d946ef;
cc:magenta-7
caret-color: #bb3cce;
cc:magenta-8
caret-color: #9c32ac;
cc:magenta-9
caret-color: #7e298b;
cc:magenta-10
caret-color: #5f1f69;
cc:magenta-11
caret-color: #411548;
cc:magenta-12
caret-color: #230b26;
cc:pink-1
caret-color: #fce2ef;
cc:pink-2
caret-color: #f9c8e0;
cc:pink-3
caret-color: #f7aed2;
cc:pink-4
caret-color: #f495c4;
cc:pink-5
caret-color: #f17bb6;
cc:pink-6
caret-color: #ef62a7;
cc:pink
caret-color: #ec4899;
cc:pink-7
caret-color: #cb3e84;
cc:pink-8
caret-color: #aa346e;
cc:pink-9
caret-color: #892a59;
cc:pink-10
caret-color: #682043;
cc:pink-11
caret-color: #47162e;
cc:pink-12
caret-color: #260c18;
cc:coral-1
caret-color: #ffe8ed;
cc:coral-2
caret-color: #ffd4de;
cc:coral-3
caret-color: #ffc0cf;
cc:coral-4
caret-color: #ffabbf;
cc:coral-5
caret-color: #ff97b0;
cc:coral-6
caret-color: #ff83a0;
cc:coral
caret-color: #ff6f91;
cc:coral-7
caret-color: #db5f7d;
cc:coral-8
caret-color: #b85068;
cc:coral-9
caret-color: #944054;
cc:coral-10
caret-color: #703140;
cc:coral-11
caret-color: #4d212c;
cc:coral-12
caret-color: #291217;
cc:zinc-1
caret-color: #e3e3e5;
cc:zinc-2
caret-color: #cbcbce;
cc:zinc-3
caret-color: #b3b3b7;
cc:zinc-4
caret-color: #9b9ba0;
cc:zinc-5
caret-color: #828289;
cc:zinc-6
caret-color: #6a6a72;
cc:zinc
caret-color: #52525b;
cc:zinc-7
caret-color: #47474e;
cc:zinc-8
caret-color: #3b3b42;
cc:zinc-9
caret-color: #303035;
cc:zinc-10
caret-color: #242428;
cc:zinc-11
caret-color: #19191b;
cc:zinc-12
caret-color: #0d0d0f;
cc:gray-1
caret-color: #e7e8eb;
cc:gray-2
caret-color: #d3d5d9;
cc:gray-3
caret-color: #bec1c7;
cc:gray-4
caret-color: #a9adb5;
cc:gray-5
caret-color: #9499a4;
cc:gray-6
caret-color: #808692;
cc:gray
caret-color: #6b7280;
cc:gray-7
caret-color: #5c626e;
cc:gray-8
caret-color: #4d525c;
cc:gray-9
caret-color: #3e424a;
cc:gray-10
caret-color: #2f3238;
cc:gray-11
caret-color: #202226;
cc:gray-12
caret-color: #111214;
cc:slate-1
caret-color: #e6e9ec;
cc:slate-2
caret-color: #d1d5dc;
cc:slate-3
caret-color: #bbc2cc;
cc:slate-4
caret-color: #a5aebc;
cc:slate-5
caret-color: #8f9bab;
cc:slate-6
caret-color: #7a879b;
cc:slate
caret-color: #64748b;
cc:slate-7
caret-color: #566478;
cc:slate-8
caret-color: #485464;
cc:slate-9
caret-color: #3a4351;
cc:slate-10
caret-color: #2c333d;
cc:slate-11
caret-color: #1e232a;
cc:slate-12
caret-color: #101316;
cc:silver-1
caret-color: #eff0f2;
cc:silver-2
caret-color: #e1e3e7;
cc:silver-3
caret-color: #d3d7dc;
cc:silver-4
caret-color: #c6cad1;
cc:silver-5
caret-color: #b8bdc5;
cc:silver-6
caret-color: #aab0ba;
cc:silver
caret-color: #9ca3af;
cc:silver-7
caret-color: #868c97;
cc:silver-8
caret-color: #70757e;
cc:silver-9
caret-color: #5a5f66;
cc:silver-10
caret-color: #45484d;
cc:silver-11
caret-color: #2f3135;
cc:silver-12
caret-color: #191a1c;
cc:black
caret-color: #000000;
cc:current
caret-color: currentColor;
cc:transparent
caret-color: transparent;
cc:white
caret-color: #ffffff;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.