A re-imagined Devtools for web design

CSS Pro makes it radically easy to get the looks of your favorite websites. Hover over any element, and get everything you need (styles, animations, assets, etc...), instantly. Copy elements with a single click, or edit them with our intuitive CSS editor, without writing code.

PRO badge Get it now Try it on this page See how it works (2:28)

Built to work on any website

CSS Pro runs on the browser as an extension. It works on all kinds of websites: WordPress, Shopify, React, Wix, all themes, anything. It works even if the website is not yours. No code change is required, and it works offline.

Powerful, accurate and lightspeed CSS inspection

We've spent two years testing and building the smartest and most complete CSS inspection tool so that you can get everything you need effortlessly. And it's always getting better.

Try it yourself on this page
  • Inspect CSS on the fly
  • Uncluttered, optimized, and clean CSS: a code that is easy to understand
  • Colors previews and syntax highlighting
  • Identify which font is being used
  • Check element dimensions
  • Check HTML attributes
  • Copy all pseudo-classes (:hover, :focus, etc)
  • Copy all pseudo-elements (:before, :after, etc)
  • Copy all media queries
  • Copy the CSS and HTML of any element and all its children
  • Copy CSS animations @keyframes
  • Copy CSS selector (classes, ids, and unique selectors)
  • Export element to Codepen or save it as a file
  • Check alignments in real-time with guidelines
  • Re-target selected element with DOM tree navigation
Notification message
Example image

A Card Title


Los Angeles, USA

Sunday, 11:00 pm


Humidity 66%

See an animations' code easily

Understand how every CSS animation works by visualizing the CSS of the keyframes without having to dig the source code.

Try it on this page




CerebriSans-Regular 80px

font-size: 80px; animation: pulse 700ms infinite;

@keyframes pulse

50% {   filter: brightness(1.2);   transform: scale(1.2); }

Click, and it's yours

Copy the designs of your favorite websites, frameworks, or themes. It extracts the HTML and CSS of an element and all its children in seconds. Build your page to perfection.

div .sibling
div .parent
↳ div .child




Times 14px

color: #fff; font-size: 14px; text-align: right;

You're 100% in control

Not the right element you're looking for? Precisely re-target any DOM element using your keyboard's arrow keys to navigate through the HTML tree. You can also open the extension from your Devtools to select an element.

Save hidden assets

Easily download any image from a website without having to dig the code. CSS Pro gathers all images for you by analyzing background images, img tags, svgs and even HTML attributes! Download all images from a website with a single click.

Hop on board the new and smart way to work with CSS

Live editing

Easily customize any element's CSS and see the changes in a real-time and seamless experience.

The Visual Editor is like having WordPress-like theme builders, but for the whole internet. And it automatically generates first-class CSS code for you, ready-to-use.

  • Visual Editor: change and add styles interactively, without writing CSS code
  • Code Editor: with syntax highlighting and color pickers
  • Quickly experiment design tweaks in real-time
  • Edit everything, including pseudo-classes, pseudo-elements, and @keyframes!

Color pickers, with tints and shades

Pick your perfect colors with our color picker. It generates tints and shades of the selected color in real-time, making it easier to test darker or brighter colors. Change color formats, such as HEX to RGB, in a second.

Convert px to %, em, etc

Save time and make your websites look better on mobile by converting absolute (px) to relative measurement units (%, em, etc...) and vice-versa with a single click. No more calculators.

Test new texts quick and easy

Want to try a different copywriting? Click on any text you want to change, type, and watch it happen.

Remove elements

Try cleaner designs or simply get rid of ads. Easily remove any element from a page.

All changes are tracked and shareable

CSS Pro keeps track of all changes you make on the elements' CSS when using it. Never lose your changes anymore. See all the improvements you've made, and easily share, copy or export them all.

  • Share all changes as a link that anyone can access to see the edited website with your CSS changes - even if they don't have the extension installed
  • Export all changes as a file (easily share it with your team)
  • Reset all changes
  • Copy all changes
h5.card-title CHANGED
@@ -1,10 +1,6 @@
- font-size: 20px;
+ font-size: 24px;
  font-weight: 500;
line-height: 1.2;
  margin-bottom: .75rem;
  margin-top: 0;
- color: #212529;
+ color: rgba(247, 0, 0, 1);

Copy and export elements from your favorite websites and themes

Extract the HTML and CSS of elements and all its children (as whole components).

You can share these web elements (as files or Codepen snippets) with your team or keep them on your desktop and start your folder of beautiful elements that you can use on your projects from today on.

  • Copy the CSS and HTML of elements and its children
  • Save elements as files
  • Export elements to Codepen

Devtools integration

Want to see the HTML at the same time? You can also open CSS Pro inside your Devtools! Fits right into your workflow. This feature is only available on

DEMO badge


Color eyedropper

Fell in love with a color you saw somewhere? Use Pro's color eyedropper - it works even if it's an image. Point and click to get the color you're seeing.

Website palette

Analyze the entire palette of colors from a website in a second. Find the color you like, and just click on it to get its syntax.

DEMO badge

Measure anything, instantly.

Save time with the Ruler feature. Measure elements and the distance between everything you see on your browser, in real-time, or, click and drag to measure freely.

Get it now

Copywriters - my secret weapon is CSS Pro.

I can throw my copy into ANY live website in seconds to get more 'feel' and create mockups for my clients.

Plus - I can steal their fonts and colour schemes.

Alex Napier Holland

Alex Napier Holland
Sales copywriter at alexnapierholland.com

We do a lot of quick prototyping on live apps and CSS Pro really speeds up the entire workflow. It is significantly faster and more convenient than using built-in dev tools. Features such as the Ruler, Eyedropper, and Visual Editor really stand out for us, making playing with different designs so much easier.

A must-have tool for anyone doing CSS design work!

Globenet Logo

Developer at Globenet

I was impressed with all of the options this extension had. It replaced my full extension stack other than the necessities. Yes, this product is a little pricey, but for me, the average website costs $1,500+, so this was a no-brainer.

On top of that, the export to Codepen is genius! I mean, what CSS tool has a ruler, color palette, font inspector, history of changes, shortcut keys, and on top of all of this it works within Developer Tools...

Globenet Logo

Chris Seifert
Developer at portseif.io

I have been "blown away" about the usefulness of CSS Pro in my workflow. It completely replaces 4 or 5 other tools, replaced the dev console in 95% of situations, aggregates page assets to one-click when needed, remembers CSS changes I make... it does it all.

If you develop sites or tweak CSS code then you absolutely need this tool. All of my team has it now and they use it daily!

Josen Ruiseco

Josen Ruiseco
President at ShoutCloud Studios

Take your work to the next level

Available for Chrome, Firefox, and Safari. For Safari, macOS 10.12 or later required.
The extension will only work while your subscription is valid and not expired.

Need more than 10 licenses for your business? Click here

Loading spinner Loading demo... Please wait