CSS Only Brackets Logo

  • follow us in feedly
Published January 28, 2014 by Brad Knutson
CSS Only Brackets Logo

I’m fascinated with the current trend of flat design. Not only are companies using flat web design when they update their websites, they are also creating flat icons for their company logos. These icons are simple, flawless, and sharp.

At any rate, my favorite code editor is Brackets, and they also use flat design for their website, their company logo, and the code editor itself. I became curious about recreating their company logo with just CSS.

Unsurprisingly, it is possible to recreate this icon with just CSS. After a little research and a lot of tinkering, I think I’ve come up with a suitable solution.



The Result

Once you break it down, it’s not all that complicated. The blue section around the outside is a border, the white inside is the background color of the div, and the dark grey brackets are an inset box shadow. The box shadow has a vertical white line positioned over the top of it to break up the box shadow and make it look like brackets. That’s essentially it.

I initially saw this demo on CSSDeck, which I modified to reflect the new flat design.

I’m always fascinated at how creative some designers are, and how well they have a handle on CSS. Even after coming up with this demo, I still know that I’m a long ways away from being a CSS master. Thanks for reading!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

3 thoughts on “CSS Only Brackets Logo

  1. Mike Sansone

    Thanks for posting this and including the code, Brad. I’ve been watching how flat design is the gold rush now. Do you think this has to do with the forthcoming tech such as curved screens and glassware (glass-wear)?

    1. Brad Knutson Post author

      That’s a good question Mike. I think that might have something to do with it, but I also think that realistic design, like skeuomorphism, is just played out and kind of cheesy. It was over done. I think the big brands set trends like this, so when Apple updated iOS7 to be a flat UI design as opposed to skeuomorphism, I figured the rest of the world would follow suit sooner or later.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">