CSS PRO

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 badgeGet it now
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.

  • 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

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.

svg .animated-heart

80×80

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.

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.

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)
  • Quickly experiment design tweaks in real-time
  • Copy all changes
h5.card-title

Copy changes only

Copy new code

1
– font-size: 20px;
1
+ font-size: 24px;
2
2
  font-weight: 500;
3
3
  line-height: 1.2;
4
4
  margin-bottom: .75rem;
5
5
  margin-top: 0;
6
– color: #212529;
6
+ 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.

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

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.

Monthly

$20/month

Billed every month

  • License for 3 activations
  • All updates within 1 month
  • Chrome, Firefox, Safari
  • Scan unlimited websites
Buy CSS Pro

76% of Pros choose Yearly

Yearly

$10/month

Billed $120 yearly

  • License for 3 activations
  • All updates within 1 month
  • Chrome, Firefox, Safari
  • Scan unlimited websites
  • Priority Support
  • Save 50% – Get 6 months free
Buy CSS Pro

Need more than 10 licenses for your business? Click here