«   Previous tip Next tip   »

Chrome DevTools: Copy and extract all the CSS for an element on the page

9th August 2019
Copy and extract all the CSS for an element on the page

I've written a bunch of new articles. From career related topics, to technical concepts. Go and check out the blog!

Introduction

You can now extract all the CSS for a selected element. This can be helpful while prototyping new designs.

To try this out

Follow these steps:

  1. Right click on a DOM node in the Elements Panel
  2. Select Copy > Copy styles

Your clipboard now has all the styles for the given element, including inherited styles.

This feature is especially useful as CSS can often be scattered across many selectors, which makes extracting exactly what you need more of a challenge. The Copy styles feature does the hard work for you, and it will even include custom CSS variables, if any have been defined.

Extra resource

This is one of the more popular tips in Chrome DevTools. Another popular tip is the screenshot functionality built in DevTools, where you can take full-page, element-only or viewport screenshots.

«   Previous tip Next tip   »

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