- const randomInRange = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min
- const baseHue = randomInRange(0, 360)
- const bubbleCount = 50
- let b = 0
while b < bubbleCount
  - const size = randomInRange(10, 50)
  - const x = randomInRange(0, 100)
  .bubble(style=`--x: ${x}; --size: ${size}; --hue: ${baseHue}`)
  - b++
View Compiled
body
  align-items center
  background #111
  display flex
  justify-content center
  min-height 100vh
  overflow hidden

.bubble
  --bubble-outline 'hsl(%s, 100%, 50%)' % var(--hue)
  --bubble-spot 'hsl(%s, 100%, 75%)' % var(--hue)
  --bubble-shade 'hsl(%s, 100%, 70%)' % var(--hue)
  background radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--bubble-spot), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--bubble-shade) 98%)
  border 1px solid var(--bubble-outline)
  border-radius 100%
  height calc(var(--size) * 1px)
  left calc(var(--x) * 1%)
  position absolute
  transform translate(-50%, 0)
  width calc(var(--size) * 1px)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.