Как я могу создать цветовой круг с помощью CSS (с белым в центре и плавным переходом в черный по краю)?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как я могу создать цветовой круг с помощью CSS (с белым в центре и плавным переходом в черный по краю)?

Сообщение Anonymous »

Приведенный ниже код создает цветовой круг, который близок к тому, что мне нужно, но не совсем:
[img]https://i. sstatic.net/xJC2H.png[/img]

Как настроить CSS так, чтобы цветовой круг содержал все оттенки (например, с помощью конического градиента, и, возможно, я я уже все сделал правильно) и каждый оттенок переходит от полной яркости (белого) в центре до 0 яркости (черного) по краям?
Под «светлостью» я подразумеваю значение L в цветовых кодах HSL.

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

div {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient */

.radial {
background: radial-gradient(circle closest-side, hsl(0deg 0% 100% / 100%), hsl(0deg 0% 100% / 50%), hsl(0deg 0% 100% / 0%), hsl(0deg 0% 0% / 0%), hsl(0deg 0% 0% / 100%));
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient */

.conic {
background: conic-gradient(hsl(0deg 100% 50%), hsl(10deg 100% 50%), hsl(20deg 100% 50%), hsl(30deg 100% 50%), hsl(40deg 100% 50%), hsl(50deg 100% 50%), hsl(60deg 100% 50%), hsl(70deg 100% 50%), hsl(80deg 100% 50%), hsl(90deg 100% 50%), hsl(100deg 100% 50%), hsl(110deg 100% 50%), hsl(120deg 100% 50%), hsl(130deg 100% 50%), hsl(140deg 100% 50%), hsl(150deg 100% 50%), hsl(160deg 100% 50%), hsl(170deg 100% 50%), hsl(180deg 100% 50%), hsl(190deg 100% 50%), hsl(200deg 100% 50%), hsl(210deg 100% 50%), hsl(220deg 100% 50%), hsl(230deg 100% 50%), hsl(240deg 100% 50%), hsl(250deg 100% 50%), hsl(260deg 100% 50%), hsl(270deg 100% 50%), hsl(280deg 100% 50%), hsl(290deg 100% 50%), hsl(300deg 100% 50%), hsl(310deg 100% 50%), hsl(320deg 100% 50%), hsl(330deg 100% 50%), hsl(340deg 100% 50%), hsl(350deg 100% 50%));
}


В настоящее время мой радиальный градиент не плавный от центра до края.
https://developer.mozilla.org/en-US/doc ... c-gradient
https://developer.mozilla.org/en-US/doc ... l-gradient

Подробнее здесь: https://stackoverflow.com/questions/741 ... g-to-black
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»