Как отобразить данную тень?

Question

[towncitybr]

в макете пишет background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #4C4C4C 100%);
но если вставить - то не совсем похоже

https://jsfiddle.net/vpcaxfm2/

Comments

[Ankhena]

Обратите внимание на mix-blend-mode.
Но я бы тыкнула пипеткой в цвет с макета и оставила бы просто градиент.

[towncitybr]

Ankhena, вижу, есть такое в макете( mix-blend-mode: multiply;)
но не совсем понимаю что это даст

[Вадим]

towncitybr, уже дало. Это режим смешивания слоев. В браузерах поддержка не лучшая а при разнородном контент в одном и том же компоненте может давать нежелаемый результат.
Либо пипетка, либо пните дизайнера чтоб забыл про это смешивание/наложение

[towncitybr]

Вадим, вроде #ededed
https://www.figma.com/file/k2ERljW0CST3RS6piZXtL6/...
но что дальше делать не понятно

[Ankhena]

towncitybr,

но что дальше делать не понятно

Заменить им цвет в градиенте.

Дизайнеру в любом случае имеет смысл сказать, что не стоит так делать.

[towncitybr]

Ankhena, все-равно вроде не похоже
https://jsfiddle.net/9hd2b8mg/1/

[Ankhena]

towncitybr,

все-равно вроде не похоже
https://jsfiddle.net/9hd2b8mg/1/

Я не поняла, почему вы в градиенте вы пишете #4C4C4C если натыкали пипеткой #ededed?

[towncitybr]

Ankhena, меняю https://jsfiddle.net/2tdn6rLq/

[Ankhena]

towncitybr,

[towncitybr]

Ankhena, а . так? https://jsfiddle.net/rpjxbas9/

но все-равно вроде не похоже

[Ankhena]

towncitybr, да что же вы пишете-то? Детский сад какой-то.
2385 нет таких чисел в rgb
Хром справится, а вот более капризные браузеры нет.

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

Но обычно достаточно близкого попадания.

[towncitybr]

Ankhena, поправил , но все-равно непонятно что поправить
https://jsfiddle.net/bsx6am24/

[Ankhena]

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

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

Точного совпадения вы вряд ли добьетесь, потому что в макете смешивание слоев отличное от normal. Но можете подобрать близкое.

Не нравится как получается - скорректируйте цвета методом подбора.

В конце концов, можете использовать и смешивание из макета, проверив отображение во всех браузерах из ТЗ.

[towncitybr]

Ankhena, нужно регулировать обе прозрачности?
https://jsfiddle.net/u53wxzhj/1/

[v3shin]

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

[Ankhena]

towncitybr,

нужно регулировать обе прозрачности?
https://jsfiddle.net/u53wxzhj/1/

Вы пипеткой натыкали непрозрачный цвет. Полностью непрозрачный, совсем непрозрачный. Просто как натыкали так и пишите.
Натыкали #3D3D3D - пишите #3D3D3D.

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

Если совсем ну никак, то засуньте картинку градиента в колорзиллу и скопируйте оттуда (только без префиксов всяких) https://www.colorzilla.com/gradient-editor/

[towncitybr]

Ankhena, просто нюанс , что не совсем похоже
может мне кажется
не знаю

[Ankhena]

towncitybr,

просто нюанс , что не совсем похоже

Что я могу сказать. Экспериметируйте с цветами пока не станет похоже.

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

[Роман Дворянов]

Ankhena, вы человек с килограммом терпения, мое почтение!)