What is currentcolor?

currentColor is a fantastic CSS value and one that not nearly enough people know about.

currentColor is a value that takes on the value of whatever color is currently set to for that selector, whether it’s implicitly set or if it’s inherited.

This might sound a bit strange, but here is an example where it can be really useful for buttons that have a border that matches the font color

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
}

And, why not go the extra mile and throw a box shadow on there to boot:

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  box-shadow: 0 0 25px -10px currentColor;
}

Of course, we can keep a lot of that on a single button class, and then just manipulate the color with a modifier class, like I’ve done in the Pen below that you can explore.

See the Pen Styling buttons with currentColor by Kevin (@kevinpowell) on CodePen.

While handy, it lets you done some fun things too

It can seem like a nice trick to let you get away with styling a little less, but you can push this to do some really fun things with it! In this CodePen by Benjamin Réthoré, and entire form is styled with it, and in this one by Scott Kellum, he uses it on the html selector itself to do some fun stuff.

Check those out, and then see what you can do with it!

Don't want to miss an article?

If you never want to miss out on any of my content? Subscribe to my newsletter!

It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

    We won't send you spam. Unsubscribe at any time.