Pure CSS3 Flower

A blossom drawn just using only CSS3.
<html> <head> <style> body { background-color:lightblue; } .flower { display:block; width:100px; height:100px; background:pink; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; radius:30px; position:relative; top: 100px; } .flower2 { display:block; width:100px; height:100px; background-color: pink; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(red), to(pink)); background: -moz-radial-gradient(50% 50%, farthest-side,red,pink); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); rotation:45deg; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; } .circle { width:50px; height:50px; background:yellow; -moz-box-shadow: inset 0 0 5px 5px orange; -webkit-box-shadow: inset 0 0 5px 5px orange; box-shadow: inset 0 0 5px 5px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:relative; top: 25px; } </style> </head> <body> <center> <form> <div class="flower"> <span class="flower2"> <p class="circle"> </p> </span> </div> </form> </center> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here