↓ I built a game! Check it out ↓

Calculations In CSS With calc()

November 30, 2018 by Andreas Wik

calc() is a nifty little feature in CSS which lets you – oh yeah, you guessed it – calculate stuff. Great when working with values that need to be dynamic and that you otherwise would have to achieve with JavaScript.

So let’s take a look at an example where this could be handy. Imagine if you wanted to place a background image a certain distance from the bottom right corner.

Placing a background image a certain distance from the top left corner is easy:

See the Pen Background image 15px from top left corner by Andreas Wik (@andreaswik) on CodePen.


But what if we want it 15px from the bottom right corner? This is a great example where we could use calc(). Take a 100% of width and subtract as much as you want, in this case 15px:

See the Pen calc() background image position bottom right by Andreas Wik (@andreaswik) on CodePen.


I’m sure you can think of way more situations where this could be useful. I ran into this article https://vincentp.me/blog/use-cases-for-calc by Vincent Pickering which goes through a bunch of examples.