cloud logo script

<i> cloud

This is a regular looking minimalist cloud icon. The stunning thing is that it’s built entirely with markup and CSS, no Photoshop required

Nice online CSS Dev environment  -
/* <i> Cloud */

html {
	min-height: 100%;
	background: linear-gradient(#b4bcbf, #fff);

.cloud {
	display: inline-block;
	background-color: #fff;
	width: 3em;
	height: 1em;
	border-radius: 3em;
	position: relative;
	box-shadow: inset 0 -1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,100,160,.1);

.cloud:before, .cloud:after {
	position: absolute;
	background-color: #fff;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	top: -6px;
	left: 7px;
	box-shadow: 0 -2px 2px rgba(0,0,0,.05);

.cloud:after {
	width: 23px;
	height: 23px;
	left: auto;
	right: 7px;
	top: -10px

.cloud { /* This stuff is just for the demo */
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.5em -1.5em;


<i class=cloud></i>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s