Как пользоваться
- Выберите Линейный или Радиальный.
- Для линейного градиента задайте угол.
- Настройте цвет и положение каждой точки. Добавить точку — ещё один цвет (до пяти), Удалить — убрать лишний.
- Нажмите Копировать и вставьте правило в CSS.
Что означает код
По умолчанию получается background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%); — переход от оранжевого у левого края к тёмно-красному у правого. Каждая пара — это цвет и точка, где он достигается полностью. Между точками браузер плавно смешивает цвета.
Пример
Три точки: #ff7a18 на 0 %, #ffffff на 50 % и #af002d на 100 % дают градиент, который проходит через белый посередине: linear-gradient(90deg, #ff7a18 0%, #ffffff 50%, #af002d 100%).
Советы
- Поставьте две точки в одно положение — получится резкая граница вместо перехода.
- Цвета смешиваются в sRGB, поэтому середина между дополнительными цветами может выйти сероватой; добавьте промежуточную точку.
- Текст поверх градиента проверяйте на контраст с обоих концов.