Примеры градиентных фонов. В каждом случае градиентный фон является фоном отдельной ячейки таблицы.

 
1

Примеры комбинированных фонов. В каждом случае фон состоит из градиентного фона (уменьшение яркости цвета слева направо до нулевого значения) отдельной ячейки таблицы и простого фона ячейки таблицы, причём цвет фона ячейки совпадает с левым крайним цветом градиентного фона. Подобное техническое решение позволяет уменьшить размер рисунка градиентного фона и, как следствие, уменьшить время загрузки страницы сайта.

1 

В данных примерах градиентный фон состоит из двух цветов, плавно переходящих один в другой.

1 

В данных примерах градиентный фон имеет меньший размер в пикселях.

 
Применение градиентных фонов может иметь ряд негативных моментов:

1. Искажение плавности перехода цветов и их оттенков, выраженной в ступенчатости.

2. Увеличение времени загрузки страниц сайта.

3. Искажение общего впечатления от страницы, когда сайт построен на основе жёстко-переменной, адаптивной (*) к изменению размеров экрана с жёсткими, неизменяющимися областями дизайна компоновки страниц.

(*) Адаптивная компоновка позволяет сайту самонастраиваться под тот экран монитора, на котором его просматривают. Например, если вы измените размер просматриваемой области с помощью браузера (веб-обозревателя), наш сайт будет изменять свои размеры (ширину и длину), стремясь занять всю область просмотра.

 
Целесообразно применять градиентные фоны:

1. Для сайтов, компоновка построения страниц которых жёсткая.

2. В случаях, когда заведомо известны технические характеристики компьютеров и мониторов потенциальных посетителей сайта.

Важно:

1. Техническая реализация создания фона страницы сайта в целом или её отдельной части с использованием градиентного рисунка достаточно проста. Его внедрение в дизайн сайта не представляет сложности.

2. Любой фон, отличный от белого, часто вызывает раздражение у посетителей сайта и отвлекает их внимание от товаров и услуг. Любой фоновый рисунок повышает утомляемость глаз и снижает эффективность восприятия материала. Поэтому в профессиональном веб-дизайне фоновые рисунки или фоны, отличные от белого, применяется достаточно редко.

3. На мониторах невысокого качества плавные переходы оттенков цветов могут быть искажены и выглядеть ступенчато, в виде чередующихся полос. Только современные мониторы высокого качества могут без искажений передать все оттенки градиентных тонов.

4. Воздержитесь от заказа внедрения в состав дизайна сайта фона в виде градиентного рисунка, если на это нет достаточных обоснований. Применять градиентные фоны можно, например, для оформления небольших фрагментов страницы сайта, отдельных ячеек таблиц и т.д.