Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<i> Cloud
/* <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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment