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”).
-
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 thetext-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 thetext-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.