Catching a pixel that has shifted by half a millimeter is a task familiar to every front-end developer. Screenshot, zoom in a graphics editor, back to the browser, and repeat dozens of times an hour. When you're analyzing someone else's layout or figuring out how a browser renders a specific UI element, the process stretches to minutes.

Open Broadcaster Software (OBS) is a free, open-source streaming tool. Most people know it as software for Twitch and YouTube, but OBS has a non-obvious mode: a real-time digital magnifier. You point the capture area at the part of the screen you need, stretch it to fill the window, and every pixel is visible without saving screenshots or switching between programs.

Below you'll find step-by-step instructions for setting up OBS as a pixel inspector, an alternative method using the built-in Windows magnifier, and an honest discussion of when this technique is truly needed and when it's overkill.

💡 Quick overview:

• Install OBS and add a "Display Capture" source
• Crop the frame to the desired area using Alt + red handles
• Stretch the area to fill the window and select "Point" scaling
• Get a live magnifier without smoothing, pixels shown as they are
• For a single monitor, there's a built-in alternative: the Windows screen magnifier

Step 1: Installing OBS Studio

Download OBS Studio from the official website. The program is free and available for Windows, macOS, and Linux. Installation is straightforward: the wizard guides you through in a couple of clicks. After launching, you'll see a black preview window and a panel with sources, scenes, and an audio mixer.

Scenes and audio aren't needed for our task. The focus is entirely on the Sources panel.

Step 2: Creating a "Display Capture" source

In the Sources panel, click "+" and select Display Capture. Give the source any name and click "OK."

If you have multiple monitors, great: choose the one where your target for magnification is located. A single monitor works too, you'll just have less free space to position OBS.

Step 3: Cropping the frame to your target

This is the key step. Hold Alt and drag the red handles that appear at the edges of the preview. Crop the frame so that only the area of interest is captured: a button, an icon, a line of text, the junction of two blocks.

The rule is simple: the smaller the capture area, the greater the final magnification. If you cropped too much, use Alt + handle again to adjust.

Step 4: Stretching and scaling

Now grab the corners of the preview (without holding any keys) and stretch the frame to fill the entire OBS window. After that, right-click on the preview area and select Scale Filtering → Point.

This setting disables smoothing algorithms. In "Point" mode, OBS shows pixels as they are, square by square, without bilinear or bicubic interpolation. You see exactly what the browser or application renders: the color of each subpixel, line thickness, gradient transitions.

If you choose any other scaling mode, you'll get a blurry image. For pixel inspection, only "Point" works.

Step 5: Working with the magnifier

The configured scene works in real time. Open a browser with your layout, move the window, and OBS shows all changes instantly with no delay. This is the fundamental difference from the "screenshot → editor → check" chain: you don't interrupt yourself and you don't lose context.

This setup has one downside: you sacrifice screen space. OBS takes up part of a monitor or an entire monitor. On a desktop with two displays this isn't a problem, but on a laptop with a single screen it feels noticeably cramped.

Alternative: Windows screen magnifier

If OBS seems excessive for a one-time pixel check, Windows has a built-in tool. Press Win + + (the plus key on the numpad or next to Backspace) to launch the screen magnifier.

By default, it shows a magnified area in full-screen mode. Switch to docked window mode with Ctrl + Alt + D, and a floating panel will appear that you can move and resize.

The Windows magnifier smooths pixels by default. Open the magnifier settings (the gear icon in the panel) and uncheck Smooth edges of images and text. After this, the image becomes honest, without interpolation.

The advantage of the Windows magnifier: no installation required, works immediately. The downside: less flexibility in view area size and no "entire window = entire magnifier" mode like in OBS.

Why examine pixels under a magnifier

In practice, we use this technique during layout work and design review, especially when we need to check how the browser renders a specific element. An icon on retina looks different than on a standard monitor. A gradient can produce banding. Subpixel text smoothing differs between Windows and macOS. Without live magnification, these nuances aren't visible.

With the spread of high-resolution monitors and default display scaling in Windows, the battle for crisp lines has moved to a new level. What looks perfect on 4K can shift by half a pixel on Full HD at 125% scaling.

In the VFX industry, there's a term "fucking pixel" for situations when an artist obsesses over a single pixel at the expense of the overall picture. The analogy is apt: there's a fine line between attention to detail and perfectionism. Pixar at SIGGRAPH talked about subsurface scattering, a technology that breathes life into animated characters. Most viewers don't notice the difference. But that difference is precisely what separates "good" from "outstanding."

Web design works the same way: a visitor won't say "that pixel rendered wrong." But the overall sense of quality is built from such small things. The OBS magnifier is a quick way to control these details.

The entire process from installation to scaling is shown clearly in this video:

⁉️🤔 Frequently asked questions

OBS lags during scaling, what should I do?

Check the output settings: Settings → Video. For pixel inspection, you don't need 60 FPS; set it to 30 or even 15. Keep the base canvas resolution equal to your monitor resolution. If it lags on integrated graphics, switch the renderer to Direct3D 12 in Settings → Advanced → Video Renderer.

Can I manage without a second monitor?

Yes, but screen space will be tight. A tip: minimize all unnecessary windows, leave the browser with your layout and OBS side by side. On a laptop with a Full HD screen, you can realistically place OBS at one-third screen width, which is enough for spot checks. If that's not enough, switch to the Windows magnifier via Win + +.

Is there an equivalent for macOS?

OBS works on macOS exactly the same way, with screen capture through Display Capture or Window Capture. "Point" scaling is called Point there (the same filter in the preview context menu). The built-in macOS magnifier is Option + Cmd + 8, but it doesn't offer the same cropping flexibility as OBS.

How do I check a specific pixel in code?

In the browser DevTools, open the element inspector and hover over the node of interest. The browser will highlight it on the page. At the same time, look at the OBS window; the magnified area will show every pixel of the border, padding, and background. The OBS + DevTools combination covers the vast majority of pixel-perfect layout tasks.

Text edge smoothing differs between browsers. Will OBS help me see this?

Yes, that's exactly what this technique is useful for. Open the same layout in Chrome and Firefox, point OBS at the same text block, and the difference in subpixel rendering is visible to the naked eye. It's especially noticeable with thin fonts (300 weight) and light text on a dark background.

What a pixel magnifier provides in practice

This technique isn't for every mockup. For a landing page with five blocks, DevTools is enough. But if you're building a design system, debugging micro-animations, or polishing an interface that thousands of users will see, 10 minutes with the OBS magnifier will save hours of arguments with a designer about "why it doesn't look right."

Start small: open your current project, capture a section with an icon and text, enable "Point" scaling. If you're satisfied with what you see, great. If not, you've just found something you can fix in five minutes.

What tool do you use to check pixels during layout: a magnifier, screenshots, or do you trust the browser inspector? Let us know in the comments.