Переменная для изменения градиента

Question

Можно ли используя переменную изменить количество blue (тут 85%)? Т.е. я передаю в переменную число и количество синего меняется. Если да, то как?

background: linear-gradient(to top, blue 85%, white 10%);

Answer 1

Переменные в CSS

size.oninput = () => {
  let val = size.value;
  el.style = `--color-size: ${val}%`;
}

size.oninput();

div{
  --color-size: 80%; /* значение поумолчанию */
  background: linear-gradient(to top, blue var(--color-size), white 10%);
  
  width: 100px;
  height: 100px;
  border: 1px solid;
  display: inline-block;
}

div.half {
  --color-size: 30%;
}

<div></div>

<div class="half"></div>

<div id="el"></div>

<input id="size" value="85" type="number">

Answer 2

const elem = document.documentElement;
const range = document.querySelector(".range");
const text = document.querySelector(".text");




range.addEventListener('change', (event) => {
  let val = event.target.value;

  text.textContent = `You like ${val}`;

  elem.style.setProperty('--color-proc', `${val}%`);

});

body{
  background-color: #000;
  margin: 0;
  color: #fff;
}

:root {
    --color-proc: 85%;
}

.a{
  height: 200px;
  background: linear-gradient(to top, blue var(--color-proc), white 10%);
}

.text{
  color: #fff;
  font-size: 20px;
}

<div class="a"></div>
<input class="range" type="range" max='90' step='1' value='85'>
<p class="text">You like 85</p>

Можно так

БЛОГ НА HUSL

Переменная для изменения градиента

Ответы (2 шт):