Градиент Цветовой круг
CSS
background: conic-gradient(from 0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Открыть в конструкторе →
Другие форматы
CSS-переменная
--gradient-color-wheel: conic-gradient(from 0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);
Произвольное значение Tailwind
bg-[conic-gradient(from_0deg,_#ef4444_0%,_#eab308_25%,_#22c55e_50%,_#3b82f6_75%,_#ef4444_100%)]
Те же цвета, другие формы
Те же стопы, пропущенные через остальные функции градиента — берите ту, что подходит поверхности.
Обратное направление
background: conic-gradient(from 180deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Линейный
background: linear-gradient(0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Радиальный
background: radial-gradient(circle, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Текст на этом градиенте
Aa
1.92:1
Aa
5.02:1
Если мерить по всем стопам, почти чёрный текст держит в худшем случае контраст 5.02:1. Проходит WCAG AA для основного текста (4,5:1).
Цветовые остановки
Об этом градиенте
Цветовой круг (Color Wheel) — готовый CSS-градиент с 5 остановками цвета. Скопируйте CSS ниже, откройте в конструкторе, чтобы изменить угол и стопы, или нажмите на любой цвет для подробностей.
Ещё градиенты