Pepsi logo powered by CSS 3 Gradients

I was bored this evening, but then I had this crazy idea to draw the new Pepsi logo using CSS gradients. This could still be improved, though.

by marcoos

HTML

<span class="pepsi"></span>

CSS

body {
    background: #0f496d;
    text-align: center;
    padding: 10%;
}

.pepsi {
    background-color: #114F99;
    
    background-image: -moz-radial-gradient(90deg, red 0%, red 70%, rgba(255,255,255,0) 70.5%, rgba(255, 255, 255, 0) 100%),
        -moz-linear-gradient(-75deg, #fff 0%, #fff 70%, rgba(255,255,255,0) 70.5%, rgba(255, 255, 255, 0)),
        -moz-radial-gradient(90deg, #fff 0%, #fff 70%, rgba(255,255,255,0) 70.5%, rgba(255, 255, 255, 0));
        
    background-image: -webkit-radial-gradient(ellipse closest-corner, red 0%, red 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%),
        -webkit-linear-gradient(-75deg, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0)),
        -webkit-radial-gradient(ellipse closest-corner, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0));

    background-image: radial-gradient(ellipse closest-corner, red 0%, red 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(-75deg, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0)),
        radial-gradient(ellipse closest-corner, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0));
        
    background-position: 118% 119%, 14% 28%, 90% -141%;
    
    background-size: 195% 197%, 70.5% 101.8%, 50% 86%;
    
    background-repeat: no-repeat;
    
    border: 0.6em solid #fff;
    border-radius: 100%;
    display: inline-block;
   
    height: 15em;
    width: 15em;
}