The currentColor keyword references the element's computed color value. Here's how to use it.
Basic Usage#
1/* currentColor inherits from color property */
2.button {
3 color: #007bff;
4 border: 2px solid currentColor;
5 /* Border is #007bff */
6}
7
8.button:hover {
9 color: #0056b3;
10 /* Border automatically changes to #0056b3 */
11}
12
13/* Works with any color-accepting property */
14.example {
15 color: coral;
16 border-color: currentColor;
17 box-shadow: 0 2px 4px currentColor;
18 text-shadow: 1px 1px 2px currentColor;
19 background-color: currentColor; /* Solid background */
20}Borders and Outlines#
1/* Matching borders */
2.card {
3 color: #333;
4 border: 1px solid currentColor;
5 border-radius: 8px;
6}
7
8/* Consistent focus styles */
9.input {
10 color: #333;
11 border: 2px solid #ddd;
12}
13
14.input:focus {
15 color: #007bff;
16 border-color: currentColor;
17 outline: 2px solid currentColor;
18 outline-offset: 2px;
19}
20
21/* Decorative borders */
22.fancy-border {
23 color: purple;
24 border-top: 3px solid currentColor;
25 border-bottom: 1px solid currentColor;
26}Box Shadows#
1/* Shadow matches text color */
2.glow-text {
3 color: cyan;
4 text-shadow: 0 0 10px currentColor;
5}
6
7/* Button with matching glow */
8.glow-button {
9 color: #00ff88;
10 background: transparent;
11 border: 2px solid currentColor;
12 box-shadow: 0 0 10px currentColor,
13 inset 0 0 10px currentColor;
14}
15
16.glow-button:hover {
17 color: #00ffaa;
18 /* All shadows update automatically */
19}
20
21/* Layered shadows */
22.layered {
23 color: royalblue;
24 box-shadow:
25 0 2px 4px currentColor,
26 0 4px 8px rgba(0, 0, 0, 0.1);
27}SVG Icons#
1/* SVG inherits color */
2.icon {
3 fill: currentColor;
4 stroke: currentColor;
5}
6
7/* Icon button */
8.icon-button {
9 color: #666;
10 display: inline-flex;
11 align-items: center;
12 gap: 0.5rem;
13}
14
15.icon-button:hover {
16 color: #333;
17}
18
19.icon-button svg {
20 width: 1em;
21 height: 1em;
22 fill: currentColor;
23}
24
25/* Two-tone icon */
26.icon-two-tone {
27 color: #007bff;
28}
29
30.icon-two-tone .primary {
31 fill: currentColor;
32}
33
34.icon-two-tone .secondary {
35 fill: currentColor;
36 opacity: 0.3;
37}Links and Text#
1/* Underline matches text */
2.link {
3 color: #007bff;
4 text-decoration: underline;
5 text-decoration-color: currentColor;
6 text-underline-offset: 2px;
7}
8
9/* Faded underline */
10.subtle-link {
11 color: #333;
12 text-decoration-color: rgba(0, 0, 0, 0.3);
13}
14
15.subtle-link:hover {
16 text-decoration-color: currentColor;
17}
18
19/* Custom underline */
20.custom-underline {
21 color: #333;
22 text-decoration: none;
23 background: linear-gradient(currentColor, currentColor);
24 background-size: 100% 1px;
25 background-position: bottom;
26 background-repeat: no-repeat;
27}Pseudo-Elements#
1/* Arrow using currentColor */
2.arrow-right::after {
3 content: '';
4 display: inline-block;
5 width: 0;
6 height: 0;
7 border-top: 5px solid transparent;
8 border-bottom: 5px solid transparent;
9 border-left: 8px solid currentColor;
10 margin-left: 0.5rem;
11}
12
13/* Bullet points */
14.custom-list li::before {
15 content: '•';
16 color: currentColor;
17 margin-right: 0.5rem;
18}
19
20/* Divider */
21.divider {
22 color: #ddd;
23}
24
25.divider::before,
26.divider::after {
27 content: '';
28 flex: 1;
29 height: 1px;
30 background: currentColor;
31}Component Theming#
1/* Theme via color property */
2.alert {
3 padding: 1rem;
4 border: 1px solid currentColor;
5 border-radius: 4px;
6 background: linear-gradient(
7 to right,
8 currentColor,
9 transparent
10 );
11 background-size: 4px 100%;
12 background-repeat: no-repeat;
13}
14
15.alert-success {
16 color: #28a745;
17}
18
19.alert-warning {
20 color: #ffc107;
21}
22
23.alert-error {
24 color: #dc3545;
25}
26
27/* Badge variations */
28.badge {
29 display: inline-block;
30 padding: 0.25rem 0.5rem;
31 border: 1px solid currentColor;
32 border-radius: 9999px;
33 font-size: 0.75rem;
34}
35
36.badge-primary { color: #007bff; }
37.badge-success { color: #28a745; }
38.badge-danger { color: #dc3545; }Gradients and Backgrounds#
1/* Gradient with currentColor */
2.gradient-border {
3 color: #667eea;
4 background: linear-gradient(white, white) padding-box,
5 linear-gradient(135deg, currentColor, #764ba2) border-box;
6 border: 2px solid transparent;
7 border-radius: 8px;
8}
9
10/* Faded background */
11.faded-bg {
12 color: #007bff;
13 background: linear-gradient(
14 to bottom,
15 currentColor 0%,
16 transparent 100%
17 );
18 background-size: 100% 4px;
19 background-repeat: no-repeat;
20}
21
22/* Transparent overlay */
23.overlay {
24 color: rgba(0, 0, 0, 0.5);
25 background: currentColor;
26}Form Elements#
1/* Checkbox using currentColor */
2.checkbox {
3 color: #007bff;
4}
5
6.checkbox input:checked + .checkmark {
7 background: currentColor;
8 border-color: currentColor;
9}
10
11.checkbox .checkmark::after {
12 border-color: white;
13}
14
15/* Toggle switch */
16.toggle {
17 color: #007bff;
18}
19
20.toggle input:checked + .slider {
21 background: currentColor;
22}
23
24/* Radio button */
25.radio-dot {
26 background: currentColor;
27 transform: scale(0);
28 transition: transform 0.2s;
29}
30
31.radio input:checked ~ .radio-dot {
32 transform: scale(1);
33}Animation#
1/* Pulsing effect */
2@keyframes pulse {
3 0%, 100% {
4 box-shadow: 0 0 0 0 currentColor;
5 }
6 50% {
7 box-shadow: 0 0 0 10px transparent;
8 }
9}
10
11.pulse {
12 color: #ff4444;
13 animation: pulse 2s infinite;
14}
15
16/* Loading spinner */
17.spinner {
18 color: #007bff;
19 border: 3px solid rgba(0, 0, 0, 0.1);
20 border-top-color: currentColor;
21 border-radius: 50%;
22 animation: spin 1s linear infinite;
23}
24
25@keyframes spin {
26 to { transform: rotate(360deg); }
27}CSS Variables Integration#
1/* Combine with custom properties */
2:root {
3 --primary: #007bff;
4 --success: #28a745;
5 --danger: #dc3545;
6}
7
8.themed {
9 color: var(--primary);
10 border: 2px solid currentColor;
11 box-shadow: 0 2px 4px currentColor;
12}
13
14.themed.success {
15 color: var(--success);
16}
17
18.themed.danger {
19 color: var(--danger);
20}
21
22/* Theme inheritance */
23.theme-primary { color: var(--primary); }
24.theme-success { color: var(--success); }
25.theme-danger { color: var(--danger); }
26
27.theme-primary .button,
28.theme-success .button,
29.theme-danger .button {
30 border-color: currentColor;
31 color: inherit;
32}Best Practices#
Usage:
✓ Borders and outlines
✓ Box and text shadows
✓ SVG fill and stroke
✓ Pseudo-element colors
Benefits:
✓ Single point of color control
✓ Automatic hover state updates
✓ Theme inheritance
✓ Reduced repetition
Patterns:
✓ Component theming
✓ Icon coloring
✓ Focus indicators
✓ Decorative elements
Avoid:
✗ Backgrounds that hide text
✗ Complex opacity calculations
✗ Overuse reducing clarity
✗ Forgetting inheritance
Conclusion#
The currentColor keyword creates dynamic, maintainable color relationships. Use it for borders, shadows, SVG fills, and decorative elements. Combined with CSS variables, it enables powerful component theming with minimal code repetition.