Last Updated: February 25, 2016

SoundCloud logo made with CSS

Do you ever wanted to create the SoundCloud logo as a single element with pure CSS? No? Ok, but here we go...

What is SoundCloud?

SoundCloud is the world’s leading social sound platform where anyone can create sounds and share them everywhere.
http://soundcloud.com

Before we start...

I use em so that content can flexibly adapt to the device it is being viewed on. And you can resize the element by changing the font-size of the body.
I use prefixfree to avoid the vendor prefix hell... so should you!
http://leaverou.github.com/prefixfree

Here we go!

Single element (HTML)

<div class="soundcloud"></div>

The white clouds (CSS)

.soundcloud {
  position:absolute;
  left:50%;
  top:50%;
  margin:-1em 0 0 0;
  width:2em;
  height:2em;
  background: #fff;
  background-size: .4em .4em;
  border-radius:50%;
  border-bottom-left-radius:0;

  box-shadow:
    /* top */
    -.395em -.65em 0 .3em #fff,

    /* right */
    1em .25em 0 -.25em #fff,

    /* right extension */
    .8em .25em 0 -.25em #fff,

    /* left */
    -.695em 0em 0 0 #fff
  ;
}

The striped clouds (CSS)

.soundcloud:before,
.soundcloud:after {
  position: absolute;
  content: '';
  z-index: -1;
}

/* striped cloud: middle */
.soundcloud:before {
  top:-.25em;
  left:-2.09em;
  width:2.35em;
  height:2.25em;

  border-top-left-radius:50% 40%;
  border-top-right-radius:70%;
  border-bottom-left-radius:0;

  background:
    linear-gradient(left, transparent 50%, #fff 50%),
    linear-gradient(left, #fff 50%, transparent 50%),
    linear-gradient(right, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 100%)
  ;
  background-size: 
    3em 1em,
    .2em 1em,
    2em 1em
  ;
}

/* striped cloud: left */
.soundcloud:after {
  bottom:0;
  left:-3.09em;
  width:1.52em;
  height:1.52em;

  border-top-left-radius:50%;
  border-bottom-left-radius:50%;

  background:linear-gradient(left, #fff 50%, transparent 50%);
  background-size: .2em 1em;

  /* hide some unwanted stuff */
  clip:rect(auto, 1em, auto, auto);
}