CSS stands for Cascading Style Sheets, it is a language used to display presentation semantics. Today many designers and developers alike reached the impossible. Before CSS is only used only to style on how to present our content. Years had past, designers think different. They pushed CSS to the limit that they come up with amazing results!

If you are interested to see more, here is another set of pure css designs.

For today’s inspiration, we will be showcasing 35 jaw dropping pure css designs. Many of these designers created this just for fun and experiments. Most of the designs are rendered using only one element and no Javascript we’re harmed during this post. Can you imagine that? With the help of CSS3, in the near future, nothing is impossible. Come, take a peek and enjoy!

Pure CSS Olympic Rings

Only one element!
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Mona Lisa with pure CSS

Mona Lisa with pure CSS. Pointless but fun.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS Pin

With a shadow!
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Single element Rainbow Colored Apple logo – pure CSS

created by @samarkandiy
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS button switch

Inspired by Diego Monzon’s work on Dribbble : http://dribbble.com/shots/388701-Blue-Ice-User-Interface.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Codecast: Single Element, Pure CSS MacBook Pro

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Luigi

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Codecast: Creating Reddit Alien (Snoo) Using Pure CSS3

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pixel me using CSS

This is a pixel me in pure CSS made using an app piCSSel-art: http://kushagragour.in/lab/picssel-art/
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Non-Functional Pure CSS3 Animated Clock

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Reforest School Logo

Reforest School Logo done in pure CSS using border-radius and clever positioning of the divs to get all the proportions right.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 plane Animation demo

Amazing animation and drawing by Tayo Wegner which is done purely in CSS3 (no images). Every object is drawn using CSS shapes only. Although, 1k lines of CSS code make it a little difficult to understand.
It works great in Chrome/Safari and Firefox.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Google Play Logo with Gradients Pure CSS

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS Animated Isometric boxes

This creation uses perspective property, that only works in Webkit Browsers for now, to create a 3D view. Animations are done using the animation and keyframes properties.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Batman Logo

Batman Logo in Pure CSS3 by Oleg Milshtein. It is created using just circles and ellipses and some of ‘em are rotated to create the desired effect. You can realize the process of it’s creation by looking it at very easily. Or if not, then take a look at the code.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

New Twitter Logo in Pure CSS

New Twitter Logo made of circles.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Tweetbot’s Icon in Pure CSS

This is the icon of the popular Twitter client for iOS: Tweetbot made only with CSS. I made extensive use of the property broder-radius and box-shadow. For the background of the elements I used a lot of gradients and opacity with rgba. To reduce the HTML code I used the CSS pseudo elements :before and :after.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS Paper Airplane

Pure CSS Paper Airplane by grfxdsgn. In this creation, advanced CSS3 techniques are used to render the 3D world which works best in Safari and Chrome. Every single thing in this creation is created using CSS3 properties, whilst keeping the markup simple. The main properties used in this creation are perspective, animation and transform.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Camera App Lens

Pure CSS3 Camera (or webcam ?) coded by Justin Burns and designed by Alvin Thong. The author has taken special care to include all vendor prefixed versions of each CSS3 properties including some proprietary versions too!
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Smashing Magazine Logo

Smashing Magazine logo created in pure CSS3. To create the main logo, :after and :before pseudo elements of the span element are used. The first pseudo element is used to create the box while the second one is used to create the “S”.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Ice Cream

This is an ice cream that I made using CSS only.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS 3D Bar Chart

Pure CSS 3D Bar Graph. The 3D effect has been achieved by applying CSS3 transform: rotate(); property on side, back, front, bottom and top panels.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Windows 7 Start Menu

An illustration of the Windows 7 Start Menus with pure CSS (No images or any kind of javascript). This work is dominated by the CSS3 gradient and inset box-shadow.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Piano
A classical piano made in pure CSS3. This piano also includes a menu including a search field, a drop down, tooltips and a full contact form that is just ready to work!
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Windows Notepad

A Notepad illustration with pure CSS. All the effects in it are made by the dominance of CSS box-shadow and a linear-gradient. Inset box-shadow is used to create shiny effect around the darker border color.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Google Doodle For Eadweard J. Muybridge’s 182nd Birthday

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS3 Apple’s iOS Icons

A very nice Apple’s iOS icon set created and rendered in pure HTML/CSS3 by Louis Harboe. This set will display correctly only in Webkit browsers (Safari and Chrome) for now.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

CSS 3D World

Pure CSS 3D World that uses no Javascript.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Backbone.js CSS3 Logo

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS DC Shoes logo (box-shadow free)

The only image used is the html bg images just to pretty things up.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

iPhone Rendered With Pure CSS / Two HTML Tags (Webkit)

1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Single Element Pure CSS US Flag

One html element and a bunch of shadows.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

CSS3 iPhone v0.1

CSS3 iPhone v0.1 by Dylan Hudson (@dyln_hdsn on twitter)
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Pure CSS Ubuntu Logo

Single Element Ubuntu Logo. Pure CSS.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Single Element Android bot

Single element Android bot
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Youtube Logo CSS

The YouTube logo made only using CSS.
1x1.trans 35 Creative and Jaw Dropping Pure CSS Designs

Your Turn
What is your favorite pure CSS design? If you have your own creation, why share it with us? Share your ideas and samples.

Avatar Image

Falconerie Badayos II

I'm not the only one for you but you are the only one for me.