JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="test1">
  
</div>

<div class="test2">
  
</div>

<script>
const test2 = document.querySelector('.test2');
console.log(test2)
const angle = "180deg"
const initialBg = `linear-gradient(${angle}, rgba(255,0,0,1) 0%, rgba(255,255,255,0) 100%)`;

test2.style.setProperty("--gradient", initialBg);
/* test2.style.backgroundImage = initialBg; */
</script>

CSS

:root {
  --gradient-angle: 180deg;
  --gradient-color01: #fff;
  --gradient-color02: #ff6600;
  --gradient: linear-gradient(rgba(255,0,0,1) 0%, rgba(255,255,255,0) 100%);
}

.test1, .test2 {
  height: 200px;
}

.test1 {
  background: rgb(255,0,0);
  background: var(--gradient);
}

.test2 {
  background: var(--gradient);
}