/ CSS, COPY CSS, INSPECT CSS, GETTING STARTED

How to inspect and copy an element's CSS the easy way

Here are simple steps you can do to inspect and copy the CSS of an element from a website.

With CSS Scan (Chrome, Firefox, and Safari):

CSS Scan is by far the easiest way to copy an element’s CSS nowadays.

It’s simple, it works on every website, and it’s fast.

It’s available on all of the three browsers above (Chrome, Firefox, and Safari) as an extension.

To copy the CSS code of any element with CSS Scan, just click on the element you want to copy.

It’s as simple as that. A single click and it’s yours.

It goes directly to your clipboard.

Copying CSS with CSS Scan is as easy as a single click

And any element you hover over, you’ll instantly inspect its CSS code, so it’ll save you a lot of time.

To use the extension, you can try it out a free demo on the home page.

On Chrome (without CSS Scan):

First, hover over the element you want to copy.

Then, right-click on it and choose the option “Inspect”.

It should look like this:

Chrome Devtools

On the left side is the HTML DOM tree, and on the right side, the CSS styles of the selected element.

Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”.

Chrome Devtools Copy styles

And done! The CSS was copied.

⚠️ The biggest downsides of this approach are that:

  • it doesn’t copy the element’s pseudo-classes (such as :hover, :active, etc) styles, which are special states, and for example, can be used to change a button’s color when the user’s pointer hovers over it, and many other purposes
  • it copies all CSS variables declared on the :root (even if they aren’t used on the selected element), polluting the code depending on the website.

While with CSS Scan, you do get the pseudo-classes (:hover, :active, etc) styles, all the computed CSS variables, and copy all the elements you want in a faster and easier way - without making all these steps, again, and again.

On Firefox (without CSS Scan):

First, hover over the element you want to copy. Then, right-click on it and choose the option to Inspect Element.

Firefox Devtools

Firefox doesn’t have the option “Copy styles” that Chrome has so it’s a bit harder. On the right panel of the Devtools, it’s the CSS code (styles) we want to copy:

Firefox Devtools (styles panel)

As you can see, some rules are striked-through (canceled) because they are overriden by properties above that has higher CSS specificity.

To copy the element’s CSS on Firefox, you’ll need to select all the text that you’re seeing:

Firefox Devtools

But most of the time this is going to give you a very polluted and big code.

If you want the code to be smaller and cleaner, you’ll have to remove the overriden rules and selectors by yourself, one by one, or use a tool like CSS Scan.

On Safari (without CSS Scan):

On Safari, the Development tools are hidden by default. So first, you’ll need to toggle it on.

To do that, open: Safari > Preferences (⌘ ,) > Advanced > “Show Develop menu in menu bar”

Enabling Devtools on Safari

Now, hover over the element you want to copy. Then, right-click on it and choose the option to Inspect Element. You just opened Safari Devtools:

Safari's Devtools

On the right panel of the Devtools, it’s the CSS code (styles) we want to copy.

As you can see, some rules are striked-through (canceled) because they are overriden by properties above that has higher CSS specificity.

To copy the element’s CSS on Safari, you’ll need to select all the text that you’re seeing:

Safari Devtools (copying styles from the styles panel)

But most of the time this is going to give you a very polluted and big code.

If you want the code to be smaller and cleaner, you’ll have to remove the overriden rules and selectors by yourself, one by one, or use a tool like CSS Scan.

Have you seen CSS Scan?

Check the CSS of any element you hover over, instantly.

Learn more →

CSS Scan logo