💡Note: This article is a work in progress and not yet complete. More information coming soon.

While Brave blocks 3rd party ads and other undesired content out of the box, you may still run into ads while browsing from time to time. Generally these ads are first party and it's easy to forget that Brave does not block 1st party ads by default as they tend to be safe/non-malicious. There are first-party exceptions that we do allow, which can be viewed on our Github here and here

However, in the case of gmail, Facebook and many other popular websites, this may not be desirable.

Using the Content Filter

Brave allows you to remove individual elements in a webpage using a built-in "CSS content filter". The element that was removed removed from a page using the blocker will appear in the Custom Filters section in Settings --> Shields --> Content Filtering. To use the content filter:

1. Right-click anywhere on a webpage and select the Brave option from the context menu, then click Block element
   
   
   
2. Observe that the page becomes mute in color and your cursor has changed to a + symbol — this makes it much easier to see which element you are selecting on the page. Hovering over any element with the cursor will highlight it
   
   
   
   
3. Once you've highlighted the element on the page you'd like to block, simply click on it to add it to the filter box on the bottom right of the page. This will show you the exact CSS of the element selected
   
   
   
4. Once you have the desired element selected, click the Create button and the element will be blocked from the page
   

Additionally, you can use the blue slider on the element section box to change the specificity of the selection. Dragging the bar to the right will select more specific elements with that tag on the page (all the way down to one specific element) and dragging the bar to the left will select less specific elements with that same tag, typically resulting in more elements on page being selected:

In the example above, observe that as the slider moves to the left, more of the link titles are included in the selection, while moving the slider to the right selects fewer, down to only the specific link title initially selected. This can be useful for instances where you want to block all of the same element on a page without having to go through the page and block each instance of that element individually. 

Managing Filters

Any blocked elements made using the CSS selector will be recorded and displayed on the Content Filters. You can reach this page by:

• Typing in brave://settings/shields/filters into the address bar
• Going to Menu --> Settings --> Shields --> Content filters
• Opening the Shields panel (lion icon in the address bar) and clicking Filter Lists

On the Content Filters page, you will see a Custom Filters section at the bottom of the page where the blocked elements will be displayed. Below is the element blocked in step 4 above:

To remove an element from this list, simply select it in the box and delete the element, then click Save changes. Once the entry is removed from the custom filters list, refresh the page the element was on (in this case, reddit.com) and note that the element is now visible again: