Skip to content

Instantly share code, notes, and snippets.

@abhisekp

abhisekp/jsbin.OxoFiLE.css

Last active November 23, 2016 07:26
Show Gist options
  • Save abhisekp/6526340 to your computer and use it in GitHub Desktop.
Save abhisekp/6526340 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.OxoFiLE.css
body {
background: #BFCFFE;
}
#cloud {
width: 360px; height: 120px;
background: -webkit-linear-gradient(top, #f2f9fe 10%, #d6f0fd 100%);
-webkit-border-radius: 100px;
position: relative;
margin: 200px auto 70px;
}
#cloud:after, #cloud:before {
content: '';
position: absolute;
background: #f2f9fe;
z-index: -1
}
#cloud:after {
width: 100px; height: 100px;
top: -50px; left: 50px;
-webkit-border-radius: 100px;
}
#cloud:before {
width: 180px; height: 180px;
top: -90px; right: 50px;
-webkit-border-radius: 200px;
}
.shadow {
width: 360px;
position: absolute; bottom: -10px;
background: #000;
z-index: -1;
-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 50%;
}
Raw
jsbin.OxoFiLE.html
<!DOCTYPE html>
<html>
<head>
<title>Cloud using Pure CSS</title>
</head>
<body>
<div id = "cloud"><span class='shadow'></span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment