JSFiddle - React, Tailwind, and code Playground

by kizer

HTML

<div class="box">
  Gradient Box
</div>

SASS

html, body 
  padding: 0 margin: 0  

.box 
  height: 500px width: 500px padding: 80px
  
  // gray linear
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255,
  255, 0) 40%), radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba
  (255, 255, 255, 0)), radial-gradient(circle at center -48%, #bccae4
  50%, #505e87 110%)
  
  // radial 
  background: 600% 500%/90% 90% radial-gradient(closest-side, rgba(228, 79,
  79, 0.7), rgba(228, 79, 79, 0)) no-repeat, 600% 180%/90% 90%
  radial-gradient(closest-side, rgba(228, 79, 79, 0.7), rgba(228, 79, 79, 0))
  no-repeat, 100% 150%/75% 50% radial-gradient(closest-side, rgba(250, 250,
  218, 0.2), rgba(250, 250, 218, 0)) no-repeat, -400% -100%/90% 80%
  radial-gradient(closest-side, rgba(250, 250, 218, 0.3), rgba(250, 250, 218,
  0)) no-repeat, -100% -250%/85% 80% radial-gradient(closest-side, rgba
  (94, 225, 249, 0.8), rgba(94, 225, 249, 0)) no-repeat, -170% 100%/70% 60%
  radial-gradient(closest-side, rgba(94, 225, 249, 0.6), rgba(94, 225, 249,
  0)) no-repeat, 50% 50%/100% 100% linear-gradient(30deg, #6e10ce 10%, rgba
  (110, 16, 206, 0) 70%, rgba(255, 255, 255, 0) 90%) no-repeat,
  linear-gradient(144deg, rgba(233, 235, 104, 0), rgba(233, 235, 104, 0.3))
  no-repeat, linear-gradient(90deg, rgba(104, 184, 235, 0.11), rgba(15, 216,
  223, 0.11)) no-repeat, #fff


html
    --purple: linear-gradient(320deg, rgba(235, 70, 52, 0.5), rgba(235, 70,
      52, 0)), linear-gradient(180deg, #bf5af2 0%, #7c0eb4 100%)
    --turquoise: linear-gradient(320deg, rgba(92, 235, 52, 0.3), rgba(92, 235,
      52, 0)), linear-gradient(180deg, #27a4d6 0%, #1a6d8e 100%)
    --green: linear-gradient(-220deg, rgba(255, 251, 0, 0.4), rgba(255, 251,
      0, 0) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.21), rgba(0, 0, 0,
      0)), linear-gradient(179deg, #32d74b, #1b892b) 
      background: var(--turquoise)

@supports (color: color(display-p3 1 1 1)) 
    html
        --purple: linear-gradient(320deg,...