Name: Beautifully designed and super useful extension
Item: CSS Peeper
Rating: 5
Author: MichalPliszka

Group

Software

Development & IT

Sub category

Development tools

Product tag

Development tool

Best for

Product designers

Web design agencies

Web designers

Operating system

Browser-based

Allows Existing Accounts

If Plan name changes, deal will be mapped to the new Plan name with all accompanying updates

No codes, no stacking—just choose the plan that’s right for you

You must activate your license within 60 days of purchase

This deal cannot be upgraded or downgraded between license tiers

CSS Peeper requires to use of Google Chrome to function

Only for new CSS Peeper users who do not have existing accounts

FAQs

Help center

Instagram

Twitter

YouTube

CSS Peeper Terms & Conditions

LinkedIn

First post from Founder

Company and product FAQs

<p class=""></p><h4><b>CSS Peeper is a Chrome extension that lets you inspect, explore, and analyze design properties without digging into code.</b></h4><h4><span style="font-size: 14px;"><div id="pdp-story-inline-video" class="story-inline-video"><iframe
  id="csspeeper25-vid"
  width="560"
  height="315"
  src="https://www.youtube.com/embed/XSwt0U4OQu0?si=klvJhyjNelpEH9wr&amp;rel=0"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loadonscroll
></iframe>
</div></span><b><br></b></h4><p></p><h4 class=""><b>Instantly inspect any website</b></h4><p class="">CSS Peeper lets you <b>inspect any element on a website</b>&nbsp;in Chrome, helping you break down how sites are made so you can recreate them for your own purposes.</p><ul><li><b>Simply point and click on any element</b>&nbsp;to see specific design information</li><li><b>Reveal more in-depth information </b>like padding, distance between elements, content size, borders, and more</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="CSS-Peeper-img-556afff4"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image1_UHUJWvA.png?optimizer=gif"
                alt="Website inspection"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image1_UHUJWvA.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image1_UHUJWvA.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image1_UHUJWvA.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><h5 class="" style="text-align:center;"><i>Quickly inspect any website element with a simple point and click.</i></h5><h4 class=""><b>Analyze your favorite color palettes</b></h4><p class="">Even better, you’ll be able to <b>instantly access the entire color palette of any website</b>&nbsp;using the Color Inspector.</p><ul><li><b>See specific HSL, Hex, and RGBA </b>values for any color</li><li><b>Find the colors used in specific places</b>&nbsp;like backgrounds, text, and borders</li><li><b>Copy a specific color palette and export for future use </b>and faster design workflows</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="CSS-Peeper-img-0a0cc37a"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image3_UcCGDJJ.png?optimizer=gif"
                alt="Inspect colors"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image3_UcCGDJJ.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image3_UcCGDJJ.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image3_UcCGDJJ.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><h5 class="" style="text-align:center;"><i>Instantly discover, analyze, and export website colors organized by purpose.</i></h5><h4 class=""><b>Access typography information</b></h4><p class="">CSS Peeper also lets you<b>&nbsp;explore the typography across any site </b>to&nbsp;replicate styles within any design program.<br></p><ul><li><b style="color:#000000; text-decoration:none">Access detailed typography info like font family, size, weight, and style</b></li><li><b>View text hierarchy and font pairings</b>&nbsp;to get inspired for your own projects</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="CSS-Peeper-img-7870c2f6"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image2_p3Q12f7.png?optimizer=gif"
                alt="Locate text styles"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image2_p3Q12f7.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image2_p3Q12f7.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image2_p3Q12f7.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><h5 class="" style="text-align:center;"><i>Access detailed typography information, including the weight and size of font, in seconds.</i></h5><h4 class=""><b>Browse and download assets</b></h4><p class="">And to take things up a notch, CSS Peeper makes it easy to<b>&nbsp;export every graphic on any website</b>&nbsp;in just a few clicks.<br></p><ul><li><b>Download images, SVGs, and icons</b>&nbsp;for instant access to any graphic</li><li>Save time and <b>speed up your prototype process with powerful CSS extraction</b>&nbsp;support</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="CSS-Peeper-img-ff24c305"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image4_AmHSA3b.png?optimizer=gif"
                alt="Export assets"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image4_AmHSA3b.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image4_AmHSA3b.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image4_AmHSA3b.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><h5 class="" style="text-align:center;"><i>Easily grab every asset from a webpage with all the resources at your fingertips.</i></h5><p class="">CSS Peeper lets you inspect styles, colors, fonts, and assets with a click—complete with organized design data and accessibility checks.</p><p class="">Access instant web style insights.</p><p class=""><b>Get lifetime access to CSS Peeper today!</b></p>

Use this Chrome extension to instantly analyze web design styles without digging into source code

Analyze website styles without code

It works fine

Effortless CSS Inspection at Your Fingertips

Designed for Designers.

Finally, A Chrome Extension That Doesn’t Make Me Want to Throw My Laptop Out the Window

Easy to use

CSS Peeper

Want to quickly peek into the design secrets of your favorite websites? In this video, I'll show you how to install CSS Peeper, ...

Steal Any Websites Design with CSS Peeper | Web Designer Secret Tool

Chrome extension you should be using: CSS peeper! #shorts  #chromeextensions #css #webdevelopment

Get the full source code of application here:

Google Chrome Extension CSS Peeper – Inspect Fonts, Colors & Styles in Seconds!

Are you tired of using DevTools just to check a button's style? Meet CSS Peeper, the best Chrome extension for inspecting ...

CSS Peeper

Share CSS Peeper