Chrome DevTools: Copy and extract all the CSS for an element on the page
Last updated: 6th November 2020
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:
- Right click on a DOM node in the Elements Panel
- 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.