Project: Make a logo in pure CSS

Are you looking for a way to exercise your CSS muscles? Why not try to recreate famous logos using only HTML & CSS!

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn:

☑️ If a career in tech is right for you

☑️ What tech careers fit your strengths

☑️ What skills you need to reach your goals

Take The Quiz!

CSS is a core skill for front end developers and web designers. It stands for cascading style sheets, which is code to tell browsers how to format and style HMTL. CSS can save developers a lot of time and work by providing general style “templates” for how certain types of HTML should appear. For example, rather than going into the HTML and formatting each instance of a headline 20 pt. Arial in blue, you can use CSS to format every instance of that headline in just one step.

But CSS can be used for way more than just simple formatting; it can also be used to create illustrations. Are you looking for a way to exercise your CSS muscles? Why not try to recreate famous logos using only HTML & CSS! We’re not saying this is the most efficient way to add graphics to your site, but if you’re looking for some good practice in refining your CSS skills, this CSS logo challenge will definitely keep you on your toes.

In order to create a CSS logo, you are going to need to be well versed in CSS positioning and comfortable using CSS3 properties like border-radius and transforms. And if you want to get fancy with your CSS logo, you can give gradients and box-shadows a try!

Start by coding up the iconic Olympic rings:

Olympic Rings

via Doug Neiner

Doug Neiner created this Olympic CSS logo with the border-radius property, which is used often to create rounded boxes, and he uses layering and positioning to achieve the overlapping effect.

Then try your hand at recreating the new Pepsi logo:

Pepsi Logo

This CSS logo was created by using two CSS3 properties: border-radius (which creates the elliptical shapes) and transform (which rotates them to just the right orientation so that they resemble the Pepsi logo). Click on the link below to see how these properties actually looked in a variety of browsers.

via Tangled in Design

Or go old-school with the original Adidas logo:

Adidas Logo

via ecsspert.com

This CSS logo version of the Adidas logo was also created with the border-radius property, but the designer combined it with the famously underused clip property to create the straight horizontal lines that run across.

See a breakdown of how some famous logos (including Git!) can be built in CSS:

git-css

via bchanx

Interested in seeing how all the CSS layers work together to form an image? Scroll over the CSS illustrations on this website and see how they’re built.

And if you want to get really advanced with CSS3 animations, make a pure CSS animated Twitter Fail Whale!

Twitter Fail Whale

via Subcide

Take a look into the code and you’ll see that this design is pretty complex; each rope has its own rule-set, and the whale alone has about 8 of them! And that’s not counting the animations. CSS animations are still experimental (meaning they won’t work in all browsers), but the concept is cool: transforming objects from one CSS style to another. This design does just that to create the undulating waves, flapping wings, and rising and falling whale.

Did you make your own CSS logo?
We want to see it! Tell us about it in the comments.


Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn:

☑️ If a career in tech is right for you

☑️ What tech careers fit your strengths

☑️ What skills you need to reach your goals

Take The Quiz!

Author Image

Adda Birnir

Adda Birnir is the founder and CEO of Skillcrush. She was named one of 20 Women to Watch in technology by the Columbia Journalism Review, has been featured by Fast Company and the BBC, and serves as a member of the New York City Workforce Development Board. Adda is a graduate of Yale and lives in Queens with her husband and two sons.