How to blur text on a website before screenshotting sensitive data

Taking screenshots of sensitive information can be risky, especially if you’re sharing those screenshots with others. To protect the privacy of the data, consider blurring out any sensitive text before capturing the screenshot. In this blog post, I’ll show you how to do it:

Right-click on the text you want to blur.
From the menu, select “Inspect” (or “Inspect Element”).

💡

The developer tools panel will open, showing the HTML and CSS code for the selected element. You’ll see the “Elements” tab, which displays the HTML structure, and the “Styles” tab, which shows the applied CSS styles.

In the “Styles” tab, locate the “element.style” section and add the following CSS properties:
```
{
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
```
For example:

The color: transparent; property makes the text invisible and the text-shadow property adds a subtle shadow effect, further obscuring the text.
Preview the Blurred Text:
a. As you modify the CSS, the text on the website will become blurred.
b. increase or decrease the pixel size (px) in the text-shadow value to achieve the desired level of blurriness.
Once you’re satisfied with the blurring effect, take the screenshot using your preferred method (e.g., Print Screen, Snipping Tool, or browser extensions).

Notes:

These instructions are based on Google Chrome on desktop. Other browsers may differ.
The CSS properties provided work best when the original text is dark on a lighter background. Adjust accordingly if the website you want to screenshot has a different colour scheme.