Exploring design properties

With CSS Peeper, you can inspect and explore a variety of design details, allowing you to understand how a website is built. Whether redesigning a site or simply learning from others' designs, CSS Peeper makes it easier to understand and work with the details that shape the visual experience.

By inspecting the following design details, you can accurately replicate, adapt, or optimize the visual styling of elements without digging into complex code. Here are some of the key design aspects you can inspect:

• Dimensions - Easily preview the width, height, and spacing (such as margins and padding) of any element on the page. This helps you understand the layout structure and positioning of elements in relation to one another.

• Typography - Get detailed insights into the font family, font size, font weight, line height, and letter spacing for any text on the page. You can also see how text styles are applied across headings, body copy, links, and other text elements, helping you replicate or adjust typography with precision.

• Colors - Inspect the colors, including text colors, background colors, border colors, and more. CSS Peeper displays the exact color values used, helping you analyze the palette and maintain consistency throughout your design. You can also assess color contrast to ensure readability and accessibility.

• Shadows - Explore box shadows and text shadows applied to elements. This helps you understand how depth and visual hierarchy are created, adding dimension and focus to specific elements on the page.

Smart inspections

The Smart Inspector offers an advanced way to inspect design details at a glance. It provides deeper insights into design properties, including color contrast, shadows, and elevation effects. Additionally, you can preview different element states such as hover and active for a more comprehensive inspection experience.

To access the Smart Inspector, you'll need a free account. Users from the Professional plan can enjoy unlimited smart inspections, unlocking the full potential of this powerful feature.

Element type detection

The inspector adapts to the type of element you’re inspecting, providing a customized preview. For example, when selecting an image, you can quickly download the asset without searching for it in the Assets tab.

At CSS Peeper, we’re dedicated to making your workflow as seamless as possible. We're continuously improving this feature to enhance accuracy and usability.