High quality Brave Browser gifts and merchandise. Inspired designs on t-shirts, posters, stickers, home decor, and more by independent artists and designers from around the world. All orders are custom made and most ship worldwide within 24 hours. The Brave browser is one of the newest entries in the competitive web browser space. We’ve all become banner blind ignoring the constant barrage of advertising. But as concerns around online privacy increase, Brave is already disrupting the old advertising model to return privacy to users.

1. Brave Browser Logo
2. Brave Browser Wiki
3. Brave Browser Wikipedia

Nowadays, CSS is considered the soul of web development. From styling a text to creating complex shapes with gradient, CSS can do almost anything. In this tutorial, we'll discover a creative way to replicate the Brave Browser's logo using plain CSS.

Take a look at the header of this blog post to see what we are going to create in CSS :)

Step 1. The Structure

First, take a cup of coffee and get started.

To create the Brave logo, we need a container and a wrapper. And they are also few<div> elements.
The container element would hold all the nested elements and the wrapper would maintain the aspect ratio of the graphic. Let's assume the following code snippet.

Here, the .logo class is the container element and the .wrapper class is the wrapper, of course.
The wrapper contains all the curved shapes that we need to create the inner figure.

In the above code snippet, we declared the logo dimensions and colors we need for the work.
We took 768px for the with as initial dimensions to match the source graphic.

Step 2. Creating the basic shape

Although the source graphic is geometric, it's possible to create a rough shape to fill most of the space .clip-path can do this very efficiently, also clip-path: polygon() has a good browser support at present. You can find more details about this property at CanIUse.

To set the polygon coordinates, we can use a very cool tool called Clippy. Feel free to play with Clippy here.

The visual tool gives us:

...and we got:

Don't worry, we'll fine-tune the coordinates later.

Step 3. Rounded corners and color shades

We can use gradients as layers! So to create rounded corners, we can do something like this:

And we can use same approach goes for the color shades:

Brave Browser Logo

...and also we make it full-width and absolute:

This lengthy CSS code saved 8 elements, so it's a good investment.

Step 4. The inner figure

Though we've added all details in the background, let's work with the inner figure now.

As mentioned in Step-2, we'll create a rough fill for the inner figure as well.

Step 5. Smooth Curves

The clip-path edges are sharp and we can't make them smooth using only CSS. So we've to fake the curves with certain <div> elements and their pseudo-elements. 14 elements can be a good figure, as we get 28 pseudo-elements to work with. But before that, we need to suppress the acute clipped corners that might interfere with the rounded curves. There are two concepts to do this.

1. Pop-edges
2. Pour-edges

Stacking background colored objects over the sharp-corner object (foreground object) is called Pop-edges and over-lapping the sharp-corner (foreground object) using an extensive foreground colored object is called Pour-edges.

In the case of pop-edges, we can add a background-colored rectangle (or circle/oval) to the corner side (foreground). So the keen curves would look cracked,

Opposed to pop-edges, we can add a foreground-colored rectangle (or circle/oval) to the corner side (which is foreground as well). So the edges would look poured. Now we can apply a circle (or an oval) over the poured edges with a specific border-radius and outlined thick borders. Thus it will look way smoother,

In both cases, the rectangle, oval, outlined rectangle, etc. are pseudo-elements that we're talking about, and the poped/poured edges are stacked CSS gradients. Handling many stacked gradients can be tough as we've to take care of so many numbers at the same time. So we can divide the stacks into pieces and place them in the <div> elements as comfortable. Although all div are already stacked.

So, our code would be:

Yes, it's a bit longer but based on the above concept.

Step 6. Scalability

Our logo is almost ready.
Now only one thing left, that's scalability. All coordinates were in pixels, so they're quite not responsive. We can still resize it ingeniously, like this:

Here things got a bit interesting. We're setting the dimensions comparing its current dimensions with 768! (How crazy is that? :D)

We're doing this to perform a uniform scale without even breaking the logo. Hopefully the clip-path coordinates were responsive.

Note: The --dimensions variable must be an integer between 1-768 or higher, to avoid complex calc() algorithms that could flatter on most mobile browsers.

Step 7. Major imperfections

While we've tried to make it as accurate as possible, there is still some problem we might encounter.

• First of all, CSS is rendered in different ways in different browsers, so the properties.

• CSS gradients might appear sharp or antialiased on Chromium browsers, we can get rid of them using irrational gradients, just what we did in Step-3 and further ones.

• The curves/blobs might get misplaced in Firefox as the design was made in Chrome, so we've to account for both of them individually and target one of them. For example:

Disclaimer

The Brave logo is copyrighted by Brave and is used with Brave’s permission.

Summary

Et voilà, we've created the Brave browser's logo with CSS.
I hope you've enjoyed this tutorial and you've learnt a bit about CSS. Happy Coding.

I would like to send a very special thank to @ShadowShahriar (he knows why).

A lire également

With the increased awareness that Google is using Chrome users' data for targeted ads, the demand for private browsers has grown as well. However, the search for a new browser is never an easy one, especially when it comes to privacy. While companies publicize features mostly at their face value, when it comes to privacy, users always need to do a background check just in case. Yes, a company may say it follows a no-log policy, but only after carefully reading the privacy policy, can you be sure that it’s correct. Both Brave and Waterfox go far and beyond to protect their users' personal information, and their privacy policies are proof of it. However, both have their own distinct features and are better suited for different types of internet users.

Waterfox

Released in 2011 by a 16-year-old, Waterfox is the most popular Firefox fork in the industry. Back in the day, this browser was the only version of Firefox running on an x64 build, meaning that it ran far faster on the most recent computers running Windows 7. Nowadays, that's no longer what stands out about Waterfox.

Brave Browser Wiki

The first thing users usually fall in love with is the vast customization Waterfox offers. Contrary to Firefox, this browser is still compatible with older add-ons. It's possible to install legacy extensions, WebExtensions, bootstrapped add-ons, as well as NPAPI plugins like Microsoft Silverlight and Java. Basically, Waterfox offers so much customization that you can change it any way you want to the point of making it unrecognizable.

What also makes Waterfox stand out from its competitors is that it doesn't log any users' information on its servers. Besides getting your OS details and browser version to install updates, no other information will be sent. Unfortunately, though, since a team of one runs Waterfox, security updates may take a few days to catch up with Firefox. Nevertheless, there has never been a security breach of Waterfox.

Waterfox Incognito Mode

Waterfox is available for Windows 7 and higher, macOS, and Linux. There was a mobile app in the past but it has since been deleted from the Google Store. There are still ways to download the APK file but take into consideration that some versions out there may contain malware.

Brave

Launched a little more recently, in 2015, Brave wants to change the online advertisement system. Combining an ad blocker and its own advertisement system, users only watch ads if they want to while receiving 15% of the ad revenue.

Brave does not offer as much customization as Waterfox, but since it's a Chromium-based browser, it does support all Chrome extensions. However, Brave shines the most when it comes to the variety of built-in shields it offers. Besides the aforementioned ad blocker, Brave also blocks trackers, third-party cookies, device recognition, and scripts.

Privacy-wise, Brave has a no-log policy and all options that send information to Brave's servers are disabled by default. That way, users can install the browser and start using it without spending too much time configuring the settings.

Brave Safety Shields Menu

Brave is available for desktop, running on Windows 7 and up, macOS Yosemite 10.10 and later, as well as Linux, Debian, and Fedora. On mobile, Brave is available for both Android and iOS. It's possible to synchronize throughout devices, and, contrary to other popular browsers, it's not necessary to create an account. With Brave, you can create a Sync Chain that allows synchronization through one-time verification codes. Unfortunately, it only synchronizes bookmarks at the moment.

Brave Browser Wikipedia

Conclusion

If you are looking for a private browser, both Brave and Waterfox are great options. While Waterfox is a better choice for advanced users looking for customization, Brave is more suited for regular users that prefer software that doesn’t need much input from their side. When it comes to security, Brave comes with all the required shields built-in, whereas Waterfox needs the help of extensions to reach the same level. However, when it comes to mobile, it's more secure to use Brave since Waterfox has to be downloaded from a third-party website. In the end, due to Waterfox’s customization, both browsers can become equals, so it really depends on what you prefer. Nonetheless, if you're still not sure what browser you should use, check out expert reviews to get all the information you need.

Best Secure Browsers of 2020

Get the Best Software and Tech Deals

Subscribe to our monthly newsletter to get the best deals, free trials and discounts on software and tech.