В некоторых браузерах, особенно в старых, код градиентов отличается. На реальных проектах советую прогонять ЦСС‑код через Автопрефиксер, чтобы всё работало одинаково во всех браузерах.
В ЦСС можно задавать фон элемента не только сплошным цветом или картинкой, но и градиентами нескольких типов.
В некоторых браузерах, особенно в старых, код градиентов отличается. На реальных проектах советую прогонять ЦСС‑код через Автопрефиксер, чтобы всё работало одинаково во всех браузерах.
Код градиентов достаточно нагляден и не требует особых пояснений. Главное — следить за расстановкой запятых и опечатками. На случай, если хочется вникнуть в нюансы, оставлю на полях ссылки на документацию.
Линейные градиенты
background: linear-gradient(to right, #f64f59, #12c2e9);background: linear-gradient(to bottom left, #f64f59, #12c2e9);background: linear-gradient(90deg, #f64f59, #12c2e9);background: linear-gradient(90deg, #f64f59, #c471ed, #12c2e9);background: linear-gradient(90deg, #f64f59 5%, #c471ed 30%, #12c2e9 90%);background: linear-gradient(90deg, #f64f59 5%, #c471ed 5.1%, #c471ed 30%, #12c2e9 30.1%);background: repeating-linear-gradient(45deg, #f64f59, #f64f59 10px, #12c2e9 10px, #12c2e9 20px);Радиальные градиенты
background: radial-gradient(#f64f59, #12c2e9);background: radial-gradient(circle at top left, #f64f59, #12c2e9);background: radial-gradient(circle at top left, #f64f59, #12c2e9 45%);background: radial-gradient(circle at top left, #f64f59, #c471ed 45%, #12c2e9 90%);background: radial-gradient(circle at 50% -10%, #f64f59, #c471ed 45%, #12c2e9 90%);background: repeating-radial-gradient(circle at 50% -10%, #c471ed, #12c2e9 50px);Конические градиенты
background: conic-gradient(#f64f59, #12c2e9);background: conic-gradient(from 45deg, #f64f59, #12c2e9);background: conic-gradient(from 45deg at 25% 50%, #f64f59, #12c2e9);background: conic-gradient(#f64f59, 35%, #c471ed, 77%, #12c2e9);background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);background: repeating-conic-gradient(#fff 0, #12c2e9 5%);
Верстать градиенты через ЦСС гораздо удобнее, чем добавлять их на сайт картинками. В коде можно легко и быстро изменять цвета и параметры градиента, а ещё браузер гораздо быстрее сам нарисует градиент, чем скачает файл с картинкой.
Можно применять градиент не только к фону элемента, но и к тексту. Об этом расскажу в следующих советах.
См. также советы об анимировании и эффектном наслоении градиентов:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.