.content
  h1 conic gradients
  h2 Lea Verou for president
  p resize widow
View Compiled
*
  box-sizing: border-box

body
  align-items: flex-start
  color: white
  display: flex
  font-family: Oswald
  font-weight: 300
  justify-content: center
  height: 100vh
  width: 100vw
  line-height: 1.5
  text-align: center
  
  +media(">1100px")
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red)
  
  +media("<1100px")
    background: conic-gradient(yellow .3turn, violet, yellow 326deg)
  
  +media("<1000px")
    background: conic-gradient(tomato, indigo)
  
  +media("<900px")
    background: conic-gradient(green 40%, gold 0 70%, black 0)
  
  +media("<800px")
    background: gold repeating-conic-gradient(hsla(0,30%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg)
  
  +media("<700px")
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red)
  
  
h1
  font-size: 9vw
  padding-top: 2rem
  text-transform: uppercase
  
h2
  font-size: 3rem
  
p
  font-size: 2rem
  padding-top: 1rem
  text-transform: uppercase
  
  
  
h1, h2, p
  +media("<1100px")
    color: violet
  
  +media("<1000px")
    color: white
View Compiled

External CSS

  1. https://codepen.io/brownerd/pen/b82f660d5c61dc19b30d5362994ef9c6
  2. https://codepen.io/brownerd/pen/aed5c4d00a0a30c7ea39c36c4b62b65b

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/5530/conic-gradient.js