radial-gradient()
Переход между цветами от центра к краям.
Синтаксис
radial-gradient(shape at position, color stop, …)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| shape | circle | ellipse | `circle` или `ellipse` (по умолчанию). |
| at position | position | Где центр: `at top left`, `at 30% 30%`. |
| color stop | color length | Цвет и по желанию его позиция. |
Примеры
Радиальный градиент, «глянцевый шар» и круговая диаграмма через conic-gradient():
<style>
div { width: 120px; height: 120px; display: inline-block; margin: 4px; }
</style>
<div style="background: radial-gradient(white, steelblue);"></div>
<div style="background: radial-gradient(circle at 30% 30%, white, crimson 60%, darkred);"></div>
<div style="background: conic-gradient(gold 0 25%, teal 0 60%, tomato 0); border-radius: 50%;"></div>Примечания
conic-gradient() меняет цвета вокруг центра, как стрелки часов, — удобно для круговых диаграмм и цветовых кругов.
См. также
- linear-gradient() — Плавный переход между цветами вдоль прямой — используется как фоновая картинка.
- background-image — Одна или несколько фоновых картинок: файлы или градиенты.
Вопросы и ответы по теме
В учебнике
- Тени и градиенты — Тени блоков и текста — box-shadow и text-shadow, линейные и радиальные градиенты, точки цвета.