Что такое CSS-градиент?
Создавайте линейные, радиальные и конические градиенты с перетаскиваемыми цветовыми стопами, режимами смешивания и готовым CSS.
CSS-градиент — это изображение, которое браузер генерирует из плавного перехода между цветами. Оно вычисляется при рендеринге, поэтому масштабируется без пикселизации и не требует файлов изображений.
Есть три типа: линейный (направление или угол), радиальный (круг или эллипс от центра) и конический (вращение вокруг центра). Каждый градиент задаётся цветовым стопами; у каждого стопа можно указать позицию и альфу, чтобы управлять смешением.
Несколько градиентов можно накладывать, разделяя их запятыми в background-image, и смешивать через background-blend-mode для более богатых текстур. CSS также поддерживает интерполяцию в цветовых пространствах, например oklch, для более плавных переходов.
- Линейные градиенты хорошо подходят для света и направленной глубины.
- Радиальные и конические градиенты полезны для прожекторов, колец и цветовых кругов.
- Меняйте позиции стопов, чтобы сделать переходы резче или мягче.