How to Find Fonts, Colors, Spacing, and Box Shadow on Any Website
Learn how to quickly identify fonts, colors, spacing, and box shadows on any website using simple browser tools — no coding or DevTools required.
Every designer does this. You're scrolling through a site, something catches your eye — a shadow that feels just right, a color you've been searching for, a font you can't quite place — and you want to know exactly what it is. Not close. Exact.
The good news is that every visual detail on a webpage is technically public information. It's all encoded in CSS, sitting right there in the browser. The trick is knowing how to extract it quickly without spending twenty minutes poking at DevTools. Here's a practical guide to identifying fonts, colors, spacing, and box shadows on any website in seconds.
Why Designers Reverse-Engineer Styles
Let's name the thing first. Looking up styles on other websites is something every working designer does, and it's not copying — it's research.
Research, inspiration, and competitive analysis
When a client says "we want something that feels more like Notion," you need to actually study Notion. What's their spacing rhythm? Which grays are they using? Are those shadows subtle or do they have a second, wider layer underneath? You can't answer those questions by squinting at screenshots. You have to inspect.
Recreating design systems
If you're building a design system from scratch, looking at mature systems (Vercel, Linear, Stripe, Atlassian) is one of the fastest ways to calibrate your own choices. Seeing the exact spacing scale, font sizes, and shadow values someone else landed on after years of iteration is genuinely educational.
How to Find Fonts on Any Website
Using a font identifier extension
The fastest way is a dedicated extension like WhatFont or Fonts Ninja. Install it, click the icon, click any piece of text, and you'll see the full font stack — family, weight, size, line height, and color. Total time: under three seconds.
Reading font-family from computed styles
If you don't want another extension, DevTools can do this too. Right-click text, Inspect, and look at the Computed tab. Find font-family. The first name in the stack is usually the one actually rendering. You can double-check by opening the Network tab and filtering for .woff or .woff2 files — those are the webfonts the page loaded.
Detecting web fonts vs system fonts
Here's a subtle one. If the font stack says Inter, system-ui, sans-serif, the page might be rendering Inter — or it might be falling back to system-ui if Inter didn't load. The only reliable way to tell is to check the Network tab for the actual font file. A quick shortcut: if the text looks identical across Mac, Windows, and Linux, it's a web font. If it looks different, it's probably a system stack.
How to Pick Colors from a Webpage
Color picker extensions vs DevTools
DevTools has a color picker built in (click any color swatch in the Styles pane), but it only works on declared colors. If you want to pick a color from an image, a gradient, or a rasterized element, you need an eyedropper extension. ColorZilla is the go-to — its eyedropper samples any pixel on the page and copies the value in whatever format you want.
Chrome also ships a native eyedropper API now, which some extensions and dev tools tap into. It's more accurate than the JavaScript-based samplers of years past.
Getting HEX, RGB, and HSL values
Most modern color tools let you switch formats with a toggle. HEX is fine for quick grabbing. RGB is useful when you need to paste into design software. HSL is what you want if you're building a color palette and trying to understand relationships between shades — two colors with the same H and S but different L values are the same hue at different brightnesses, which makes building a cohesive palette much easier.
Capturing gradients accurately
Gradients are trickier. An eyedropper only gives you a single pixel. To copy a full gradient, you need a CSS inspector that reads the actual background-image value. Tools like CSSpeek or CSS Scan show you the complete gradient string — angles, color stops, percentages — which you can paste directly into your own CSS.
How to Inspect Spacing, Padding, and Margins
Reading the box model
Every browser's DevTools includes a box model diagram. In Chrome, it's under the Styles pane, usually at the bottom. You'll see four concentric rectangles showing margin, border, padding, and content size. Hover a layer and it highlights on the page.
The diagram is useful, but it only shows one element at a time. Comparing spacing between two elements — say, checking whether two cards have matching internal padding — requires switching back and forth.
Comparing spacing across elements
A faster approach is a visual measurement extension like VisBug, which overlays exact pixel distances between elements as you hover. You can measure from any edge to any other edge without leaving the page. For spacing audits, it's significantly quicker than the box model diagram.
How to Extract Box Shadows
Why box shadows are tricky to copy
Box shadows seem simple — offset, blur, color — but in practice, beautiful shadows are almost never one layer. The best-looking shadows on modern sites are typically two or three layered shadows with different offsets and opacities, which creates depth that a single shadow can't match.
That layering is what makes box shadows the hardest thing to lift manually. If you copy only the first shadow from a layered stack, your version will look flat and wrong without you knowing why.
Getting exact offset, blur, and spread values
A proper CSS inspector will show you the full box-shadow value, layered shadows included. You copy the whole string — 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08) or whatever it is — and paste it into your CSS unchanged. That's the only way to get a shadow that actually matches.
Pro tip: when you're comparing shadows across sites, paste them into a tool like a CodePen or a local HTML file side by side. You'll develop an eye for which layering patterns feel right, and it'll inform your own shadow choices.
Putting It All Together in One Workflow
Here's the workflow most working designers end up on:
- Land on a site with something worth studying.
- Activate your CSS inspector (CSSpeek, CSS Scan, CSS Peeper, or whichever you prefer).
- Hover the element. Check the font, color, spacing, and shadow values.
- For detailed color work, use ColorZilla's eyedropper to grab exact pixel values.
- For typography, confirm with WhatFont.
- Paste everything into a working doc — Notion, Figma, or just a scratchpad.
Total time per element: under a minute. Total time to audit a whole page: maybe fifteen minutes, down from an hour using DevTools manually.
Final Thoughts
Identifying fonts, colors, spacing, and shadows on any website isn't a dark art. It's just a matter of using the right tool for each job. A font identifier for typography. An eyedropper for color. A CSS inspector for shadow and spacing. Combined, they turn any webpage into a readable style reference.
The skill that matters isn't the inspection itself — it's knowing which details to study. Browse with a question in mind ("how does Linear do elevation?") and the tools will answer it. Browse without one, and you'll just collect a folder of screenshots. The tools are there; the rest is attention. Install CSSpeek to start with a clean, focused inspector.
