With our bubbles all made, now we need them to act like bubbles. We could use Javascript but that's no fun. Just use CSS! There are a few things we need to animate. The vertical postioning is obvious, but we also want to scale the bubbles as they travel up. Lastly, we need to account for the "popping." Take a look at bubbleFloat to see how we did it. In addition to making the bubbles float up, we also need to make the bubles glow to give'em that radioactive look. Look at redPulse to see how we did it. Set up our animations @-webkit-keyframes bubbleFloat { from { bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } 1% { bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } 30% { bottom: 110px; -webkit-transform: scale(.8); opacity: 1; -webkit-animation-timing-function: ease-in-out; } 95% { bottom: 545px; -webkit-transform: scale(.3); opacity: 1; -webkit-animation-timing-function: ease-in-out; } 99% { bottom: 550px; -webkit-transform: scale(3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } to { bottom: 110px; -webkit-transform: scale(.9); opacity: 0; -webkit-animation-timing-function: ease-in-out; } } @-webkit-keyframes redPulse { from { -webkit-box-shadow: 0 0 30px #eb1c2a;} 50% { -webkit-box-shadow: 0 0 80px #c91a26; } to { -webkit-box-shadow: 0 0 30px #eb1c2a;} } Now just rinse and repeat to create all your bubbles! These are just a few examples of how you can use CSS box shadows to create some cool effects. Let us know how you're using them to make the web more awesome. Make'em look bubbly div#beaker { height: 700px; position: relative; } div#beaker span.bubble { width: 100px; height: 100px; position: absolute; display: block; left: 120px; bottom: 110px; -webkit-border-radius: 200px; background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(239,29,43,.2)), to(rgba(255,255,255,.7))); -webkit-animation-name: bubbleFloat; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; } div#beaker span.glow { width: 100%; height: 100%; position: relative; display: block; -webkit-border-radius: 200px; -webkit-animation-name: redPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } http://www.zurb.com/playground/css-boxshadow-experiments