«   Previous tip Next tip   »

Chrome DevTools: Easily change CSS units and values

Last updated: 29th October 2021
Easily change CSS units and values


Changing CSS values/units (10px / 1rem / 20vh) can be cumbersome. Canary DevTools has some new utilities which makes this process easier:

How to use these features

To use these features, follow these steps within the DevTools styles pane:

  1. Click on a unit type such as px or rem, for a CSS property with a length.
  2. Select a new unit from the dropdown such as vh or em.
  3. To update a numerical value, drag the number horizontally.
  4. To update the numerical value by +/- 10, hold the ⇧ (Shift) key.


This feature is currently in Chrome Canary and should make its way to Chrome stable soon.

Further Resources

DevTools has a number of related features:

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week