На картинке изображены три градиента: простой, сложный и сложный улучшенный.

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

В двух других использовались улучшения в виде цветной растяжки 100%→0% прозрачности с разными режимами наложения, заключенной в маску по форме объекта. Чтобы такие градиенты-в-прозрачное смотрелись хорошо, нужно их потюнить.

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

Если объект-улучшайзер сместить вовнутрь маски, то будет видна точка цвета, поэтому всегда стоит выносить объект с радиальным градиентом за пределы зоны видимости.

Файл примера для изучения.


Ссылки по теме:

https://www.behance.net/gallery/51830921/Gradient-Studies

Существует набор правил, позволяющих сделать градиентное пропадание объекта естественным и красивым.

Обычный градиент не дает плавных переходов. Основные проблемы: резкое пропадание объекта и видимый шаг в области перехода с прозрачности на заливку. В мелком масштабе это сразу бросается в глаза.

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

Принцип подходит для любых видов переходов — между цветами, текстурами или формами.

В файле примера используется пропадание в белый фон. Весь «пирог» в конце маскируется формой объекта.

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

Этот дефект нужно исправлять вручную. На примерах показаны исходник градиента и исправленные версии в темном и светлом вариантах.