Конический градиент с использованием цвета Oklch работает в Safari, но не в Chrome? ⇐ CSS

[Anonymous]

Недавно я нашел хороший эффект радужной границы в примере Codepen, который работает в Safari, но не работает в Chrome или Firefox. Быть новым в градиентах, может ли кто-нибудь предложить, как заставить это работать в текущих браузерах?

Код: Выделить всё

.gradient {
height: calc(200px - 6px);
width: calc(300px - 6px);
--bg-angle: 0deg;
background: linear-gradient(
to bottom,
oklch(0.1 0.2 240 / 0.95),
oklch(0.1 0.2 240 / 0.95)
)
padding-box,
conic-gradient(
from var(--bg-angle) in oklch longer hue,
oklch(0.85 0.37 0) 0 0
) border-box;
border: 6px solid transparent;
}
< /code>
и тестируемая версия: < /p>


div > div {
border: 6px solid black;
}

.gradient {
height: 100px;
width: 300px;
--bg-angle: 0deg;
background: linear-gradient(
to bottom,
oklch(0.1 0.2 240 / 0.95),
oklch(0.1 0.2 240 / 0.95)
)
padding-box,
conic-gradient(
from var(--bg-angle) in oklch longer hue,
oklch(0.85 0.37 0) 0 0
) border-box;
border: 6px solid transparent;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -in-chrome