Smiley CSS.

<style>

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}

.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}

.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}

</style>



<div class="smiley"><span></span></div>
<br />
<div class="neutral"><span></span></div>
<br />
<div class="sad"><span></span></div>


Output :)

Creating rounded rectangle CSS

<style type="text/css">

div {
position: relative;
margin: 30px;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
}
div:after, div:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
div:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}

</style>

<div></div>


Output :)

Clear icon inside input text CSS.

<style type="text/css">

.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 9px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 100px;
}
.search-box {
width: 80%;
border: 2px solid #aaa;
  outline: 0;
  border-radius: 15px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: pink;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}

</style>

<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Search anything here..." />
<button class="close-icon" type="reset"></button>
</form>
</div>


Output :)

1)

2)

Line of three segments colors html5 css3.

<style type="text/css">

div {
 position: relative;
 width: 430px;
 height: 40px;
 font-size: 27px;
 font-weight: bold;
 font-family: verdana;
}
div:after {
 content: '';
 left: 0;
 bottom: -3px;
 position: absolute;
 width: 100%;
 height: 4px;
 background: linear-gradient(to right, red, green, blue);
}

</style>

<div>This is CSS jQuery Blog.....</div>


Output :)

Chat like UI CSS.

<style type="text/css">

*{
font-size: 22px;
font-family: verdana;
}
.outer {
 display: block;
 clear: right;
}
.lbubble,
.rbubble {
 position: relative;
 padding: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 10px 0px #616161;
 box-shadow: 2px 2px 7px 0px #616161;
 display: inline-block;
 margin-bottom: 8px;
}
.lbubble {
 background: lightblue;
}
.rbubble {
 background: lightgreen;
 float: right;
}
.lbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 left: -8px;
 border-style: solid;
 border-width: 10px 14px 10px 0;
 border-color: transparent lightblue;
 width: 0;
 z-index: 1;
}
.rbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 right: -8px;
 border-style: solid;
 border-width: 10px 0 10px 14px;
 border-color: transparent lightgreen;
 width: 0;
 z-index: 1;
}

</style>


<div class='outer'>
<div class="rbubble">HIiiiiiiii, I am Right Bubble with align right</div>
</div>
<div class='outer'>
<div class="lbubble">Hiiiiiiiii, I am Left Bubble with align left</div>
</div>


Output :)

Moon Glowing Effect CSS.

<style type="text/css">

.sphere{
 position: relative;
 height:200px;
 width: 200px;
 background-color:red;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}

.sphere::after, .sphere2::after{
 background-color: rgba(255,255,255,1);
 content:'';
 height: 40%;
 width: 10%;
 position:absolute;
 top:8%;
 left:14%;
 border-radius:50%;
 transform: rotate(45deg);
}


.sphere2 {
 height:200px;
 width: 200px;
 position: relative;
 background-color:yellow;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}
.sphere2::after{
 background-color: rgba(255,255,255,0.5);
 content:'';
 position:absolute;
 border-radius:50%;
 transform: rotate(45deg);
}

</style>


<div class="sphere">CSS</div>
<div class="sphere2">
<div class="shine"></div>
    jQuery
</div>


Output :)

Arrow SVG

<style type="text/css">
html,
body {
 height: 100%;
 overflow: hidden;
}

body {
 background: rgb(17,123,189);
}

button {
 -webkit-appearance: none;
 background: transparent;
 border: 0;
 outline:0;
}

svg {
 padding: 5px;
}

.arrow {
 cursor: pointer;
 position: absolute;
 top: 50%;
 margin-top: -45px;
 margin-left: -35px;
 width: 70px;
 height: 90px;
}

.left {
 left: 42%;
}

.right {
 left: 58%;
}

.left:hover polyline,
.left:focus polyline {
 stroke-width: 3;
}

.left:active polyline {
 stroke-width: 6;
 transition: all 100ms ease-in-out;
}

.right:hover polyline,
.right:focus polyline {
 stroke-width: 3;
}

.right:active polyline {
 stroke-width: 6;
 transition: all 100ms ease-in-out;
}

polyline {
 transition: all 250ms ease-in-out;
}
</style>

<button class="arrow left">
  <svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
45.63,75.8 0.375,38.087 45.63,0.375 "/>
  </svg>
</button>
<button class="arrow right">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
0.375,0.375 45.63,38.087 0.375,75.8 "/>
  </svg>
</button>


Output :)

Move an element with a soft effect CSS.

<style type="text/css">

    #mob-home-btn {
        width: 150px;
        height: 20px;
        text-align: center;
        font-family: verdana;
        line-height: 20px;
        background-color: magenta;
       
    }
    #superDiv {
        width: 150px;
        height: 100px;
        background-color: #272727;
        transition: margin-top 1s;
    }
    #mob-home-btn:hover + #superDiv {
        margin-top: 150px;
    }

</style>


<div id="mob-home-btn">Hover Over Me</div>
<div id="superDiv"></div>


Output :)

1)

2)

Apply similar Fill Effect with SVG icons CSS.

<style type="text/css">

body {
   background: #33b5e5;
}
.st0 {
   fill:none;
   stroke:#F2F2F2;
   stroke-width:4;
   stroke-miterlimit:10;
}
.icon .st0 {
   -webkit-transition: .5s;
   transition: .5s;
}
.icon .fill {
   -webkit-transition: .5s;
   transition: .5s;
   fill: #ffffff;
}
.icon:hover {
   cursor: pointer;
}
.icon:hover .st0 {
   stroke: red;
}
.icon:hover .fill {
   -webkit-transform: scale(893, 893);
   transform: scale(893, 893);
}

</style>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
    <g class="icon-details">
        <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z" />
        <circle class="st0" cx="77.843" cy="72.434" r="33.331" />
        <circle class="st0" cx="77.844" cy="72.434" r="22.343" />
    </g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="Layer_1">
        <path class="st0" d="M247,180" />
    </g>
    <g class="icon_1_">
        <rect class="st0" x="45.25" y="71.5" class="st1" width="111.5" height="58" />
        <polyline class="st0" points="45.25,74.167 101,101.167 156.75,73.5 " />
    </g>
    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="Layer_1" class="st5">
        <path class="h0" d="M247,180" />
    </g>
    <g class="icon_2_">
        <path class="st0" d="M155.5,70.5c0,5.799-4.701,10.5-10.5,10.5H55.5C49.701,81,45,76.299,45,70.5l0,0C45,64.701,49.701,60,55.5,60
H145C150.799,60,155.5,64.701,155.5,70.5L155.5,70.5z" />
        <path class="st0" d="M155.5,100.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
C45,94.701,49.701,90,55.5,90H145C150.799,90,155.5,94.701,155.5,100.5L155.5,100.5z" />
        <path class="st0" d="M155.5,130.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
c0-5.799,4.701-10.5,10.5-10.5H145C150.799,120,155.5,124.701,155.5,130.5L155.5,130.5z" />
    </g>

    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
</svg>


Output :)

1)

2)

Nice Hover Effects on Button CSS.

<style type="text/css">

button{
background: #3a7999;
border: none;
color: #f2f2f2;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}

.b1:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.b1:Hover:before{
width: 100%;
}

.b2:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.b2:Hover:before{
height: 42px;
}

.b3:Hover{
background: rgba(0,0,0,0);
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}

@-webkit-keyframes bounce{
0%, 20%, 60%, 100%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
40%{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80%{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}

.b4:Hover{
-webkit-animation: bounce 1s;
}

.b5:Hover{
transform: skew(-10deg);
}

.b6{
transform-style: preserve- 3d;
}

.b6:after{
top: -100px;
left: 0px;
width: 100%;
position: absolute;
background: #3a7999;
border-radius: 5px;
content: "Flipped";
transforn-origin: left bottom;
transform: rotateX(90deg);
}

.b6:hover{
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}

</style>

<button class="b1">Hover Me</button>
<button class="b2">Hover Me</button>
<button class="b3">Hover Me</button>
<button class="b4">Hover Me</button>
<button class="b5">Hover Me</button>
<button class="b6">Hover Me</button>


Output :)

Animated text within box CSS.

<style type="text/css">

.animated-box {
border:3px solid #33b5e5;
border-radius: 30px 0;
color: #3300bb;
font-size: 25px;
font-family: verdana;
line-height:20px;
font-weight:bold;
text-align:center;
padding:50px;
width:200px;

-webkit-animation:fontbulger 1s infinite;
-moz-animation:   fontbulger 1s infinite;
-o-animation:     fontbulger 1s infinite;
animation:        fontbulger 1s infinite;
}

@-webkit-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@-moz-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@-o-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}

</style>

<div class="animated-box">CSS jQuery</div>


Output :)

1)

2)

Text Stroke CSS.

<html>
<head>
<title>Text Stroke</title>
<style type="text/css">

h1 {
-webkit-text-stroke: 2px red;
-moz-text-stroke: 2px red;
-o-text-stroke: 2px red;
text-stroke: 2px red;
color: white;
font-size: 200px;
font-family: forte;
}

</style>
</head>
<body>
<h1>MaHii</h1>
</body>
</html>


Output :)

Adding radius in center of div not corner CSS.

<style type="text/css">

body {
margin: 0;
}
.zone-wrapper{
background: #ddd888;
height:180px;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #33b5e5;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 1;
}
.seperator {
height: 50px;
background-color: black;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}

</style>

<div id="zone-user-wrapper" class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>


Output :)

Ribbon CSS.

<style>

body {
padding:2.618em;
font-family:sans-serif;      
}
.ribbon {
font-size: 16px !important;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em;
margin: 0 0 3em;
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}

</style>

<p class="ribbon">
    <strong class="ribbon-content">CSS jQuery BlogSpot</strong>
</p>


Output :)

Simple grading system jQuery.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

Math Marks:
<input type="text" id="math" />
<br>English Marks:
<input type="text" id="english" />
<br>History Marks:
<input type="text" id="history" />
<br>Spanish Marks:
<input type="text" id="spanish" />
<br>
<button>Show Result</button><br>
<div id="result"></div>

<script type="text/javascript">

var button = document.getElementsByTagName('button');
button[0].onclick = calc;

function calc() {
   var h;

   var d = document.getElementById('math').value;
   var e = document.getElementById('english').value;
   var f = document.getElementById('history').value;
   var g = document.getElementById('spanish').value;
   var avg = (parseFloat(d) + parseFloat(e) + parseFloat(f) + parseFloat(g)) / 4;

   if (avg >= 75) {
       h = "Passed!";
   }
   if (avg <= 74) {
       h = "Failed!";
   }
   if (d && e && f && g) {
       document.getElementById('result').innerHTML = "The average is " + avg + " which means you have " + h;
   } else {
       document.getElementById('result').innerHTML = "Please fill all inputs first."
   }
}

</script>


Output :)

1)

2)

Positioning divs in a circle using CSS.

<style type="text/css">

.circle{
   position:relative;
   width:5%;padding-bottom:50%;
   margin-left:47.5%;
}
.circle div {
   position:absolute;
   top:0; left:0;
   width:100%; height:100%;
   -webkit-transform : rotate(24deg);
   -ms-transform : rotate(24deg);
   transform : rotate(24deg);
}
.circle:before, .circle div:before {
   content:'';
   position:absolute;
   top:0; left:0;
   width:100%; padding-bottom:100%;
   border-radius: 100%;
   border: 2px solid teal;
   background:gold;
}

</style>


<div class="circle">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
    </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>


Output :)

Math game JQuery

<style type="text/css">

*{ font-family: verdana; }

</style>

<body></body>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(function() {
   getQuestion();
});

var count = 0,
   results = [];
function getQuestion() {
   count++;
   var operators = ['+', '-', '/', '*']
   var container = $('<div />');
   var val1 = Math.round(Math.random()*5);
   var val2 = Math.round(Math.random()*5);
   var operator = operators[Math.round(Math.random()*(operators.length - 1))];
   var lbl = $('<label />');
   lbl.html(val1 + ' ' + operator + ' ' + val2 + ' = ');
   container.append(lbl);
   var input = $('<input type="text" />');
   container.append(input);
   var btn = $('<input type="button" value="Answer" />');
   var val;
   btn.click(function() {

       results.push({
           number1 : val1,
           number2 : val2,
           answer : input.val()
       });

       input.attr('disabled', true);
       $(this).attr('disabled', true);

       $(this).after(function() {
           if(eval(val1 + operator + val2) == input.val()) return ' Win!';
           return ' Fail!';
       });

       getQuestion();

   });
   container.append(btn);
   $('body').append(container);
}

</script>

Output :)

Add border to odd div's using CSS.

<style type="text/css">

p{
font-family: 'verdana';
font-size: 25px;
}
.wrap {
float: left;
width: 100%;
}
.single_wrap {
float: left;
width: 50%;
padding: 15px 0;
}
.single_div {
float: left;
width: 100%;
}
.single_wrap:nth-child(odd) .single_div {
border-left: 3px solid red;
background: #33b5e5;
}
.single_wrap:nth-child(1) .single_div, .single_wrap:nth-child(2) .single_div {
border-bottom: 5px solid #005555;
}

</style>


<div class="wrap">
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
</div>


Output :)

Timer Animation JavaScript.

<style type="text/css">

body {
background: #333333;
text-align: center;
}

</style>

<svg id="svg">
  <path id="timer" fill="lightseagreen" />
</svg>

<script type="text/javascript">

var timer = document.getElementById('timer');
var svg = document.getElementById('svg');
var width = 150;
svg.setAttribute('width', width);
svg.setAttribute('height', width);
var t = 5;
var theta = 0;
var radius = svg.getAttribute('width') / 2;
timer.setAttribute('transform', 'translate(' + radius + ',' + radius + ')');

(function animate() {
 theta += 0.5;
 theta %= 360;
 var x = Math.sin(theta * Math.PI / 180) * radius;
 var y = Math.cos(theta * Math.PI / 180) * -radius;
 var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
 timer.setAttribute('d', d);
 setTimeout(animate, t)
})();

</script>


Output :)

1)

2)

Birthday Cake CSS.

<style type="text/css">

    .cake-body{
        position:relative;
        margin:100px;
    }
    .layer{
        display:block;
        background:#FFA177;
        height:50px;
        width:150px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position:absolute;
    }

    .f1{
        top:90px;
        background:#774F38;
        height:60px;
    }
    .f2{
        top:60px;
        background:#ECE5CE;
        height:60px;
    }
    .f3{
        top:30px;
        background:#E08E79;
        height:60px;
    }
    .f4{
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        background:#59280F;
        top:6px;
    }

    /* Cake Spots */

    .spot-group{
        display:block;
        height:14px;
        width:14px;
        position:absolute;
    }
    .spot{
        display:block;
        height:4px;
        width:4px;
        border-radius: 50%;
        position:absolute;
    }
    .f1 .spot{
        background:#8C5F45;
    }
    .f2 .spot{
        background:#D6CFB6;
    }
    .f3 .spot{
        background:#EB9E8A;
    }
    .sg1{
        bottom:20px;
        left:5px;
    }
    .s1{
        top:2px;
        left:10px;
    }
    .s2{
        top:7px;
        left:5px;
    }
    .s3{
        left:2px;
    }
    .sg1{
        bottom:20px;
        left:5px;
    }
    .sg2{
        bottom:20px;
        right:10px;
    }
    .sg3{
        bottom:21px;
        left:6px;
    }
    .sg4{
        bottom:11px;
        right:33px;
    }
    .sg5{
        bottom:15px;
        left:25px;
    }
    .sg6{
        bottom:20px;
        right:10px;
    }
     /* Icing */

    .icing{
        display:block;
        height:50px;
        width:150px;
        border-radius: 50%;
        background:#59280F;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.29, #59280F), color-stop(0.8, #692F12));
        position:absolute;
        top:0px;
        z-index:2;
    }

    /* Icing Drips */

    .drip-ctn{
        position:absolute
        top:0;
        z-index:1;
    }
    .drip{
      display:block;
      height:20px;
      width:20px;
      border-radius: 50%;
      background:#59280F;
      position:absolute;
    }
    .d1{
      height:25px;
      top:20px;
    }
    .d2{
      top:30px;
      left:15px
    }
    .d3{
      top:35px;
      left:30px
    }
    .d4{
      top:38px;
      left:47px
    }
    .d5{
      top:40px;
      left:65px;
    }
    .d6{
      top:38px;
      right:47px
    }
    .d7{
      top:35px;
      right:30px
    }
    .d8{
      top:30px;
      right:15px
    }
    .d9{
      height:25px;
      top:20px;
      right:0px;
    }

    /* Candles */

    .candle-ctn{
      display:block;
      width:150px;
      height:80px;
      position:absolute;
      top:-30px;
      z-index:3;
    }
    .candle{
      position:absolute;
      top:20px;
      left:70px;
    }
    .c-base{
      display:block;
      height:30px;
      width:10px;
      background:#5FEDB5;
      position:absolute;
      z-index:2;
    }
    .wick{
      display: block;
      width: 2px;
      height: 6px;
      background: #ccc;
      position: absolute;
      top: -5px;
      left: 4px;
    }
    .flame{
      display:block;
      height:16px;
      width:8px;
       border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
      background:#FF9E00;
      position:absolute;
      top:-20px;
      left:1px;
      box-shadow: 0px 0px 20px yellow;
    }
    .highlight{
      display:block;
      height:30px;
      width:60px;
      background:#333;
      border-radius:50%;
      position:absolute;
      top:17px;
      left:-25px;
      background: -webkit-radial-gradient(center, ellipse cover, rgba(145,66,26,1) 0%,rgba(105,47,18,0) 80%);
      z-index:1;
    }

</style>


<div class="cake-body">
    <div class="layer f1">
        <div class="spot-group sg1">
            <div class="spot s1"></div>
            <div class="spot s2"></div>
            <div class="spot s3"></div>
        </div>
        <div class="spot-group sg2">
            <div class="spot s1"></div>
            <div class="spot s2"></div>
        </div>
    </div>
    <div class="layer f2">
        <div class="spot-group sg3">
            <div class="spot s1"></div>
            <div class="spot s2"></div>
        </div>
        <div class="spot-group sg4">
            <div class="spot s1"></div>
            <div class="spot s2"></div>
            <div class="spot s3"></div>
        </div>
    </div>
    <div class="layer f3">
        <div class="spot-group sg5">
            <div class="spot s1"></div>
            <div class="spot s2"></div>
            <div class="spot s3"></div>
        </div>
    </div>
    <div class="layer f4">
      <div class="drip-ctn">
        <div class="drip d1"></div>
        <div class="drip d2"></div>
        <div class="drip d3"></div>
        <div class="drip d4"></div>
        <div class="drip d5"></div>
        <div class="drip d6"></div>
        <div class="drip d7"></div>
        <div class="drip d8"></div>
        <div class="drip d9"></div>
      <div>
    </div>
    <div class="candle-ctn">
        <div class="candle c1">
          <div class="c-base"></div>
          <div class="wick"></div>
          <div class="flame"></div>
          <div class="highlight"></div>
        </div>
    </div>
</div>


Output :)