Некоторые преимущества использования CSS-градиентов по сравнению с растровыми изображениями:

• Динамическая генерация. 1 Градиенты создаются браузером, их размер можно изменять «на лету». 1 Это избавляет от необходимости использовать файлы растровых изображений для достижения похожих эффектов. 1
• Улучшение качества при увеличении масштаба. 1 Градиенты выглядят лучше, чем растровые изображения, в случае увеличения масштаба. 1
• Поддержка прозрачности. 1 Градиенты позволяют накладывать фоны для получения разных эффектов. 1
• Возможность наслаивания градиентов. 1 Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны. 1
• Более быстрая загрузка сайта. 5 Использование большого количества изображений, особенно для тривиальных целей, может значительно замедлять загрузку сайта. 5 С помощью CSS-градиентов можно обеспечить более быструю загрузку без ущерба для разрешения и чёткости. 5