Как применить опасити только к фону градинет?

Question

[Windramix]

.form__search input{
    border: transparent;
    background: linear-gradient(79.64deg, #2F81ED 0%, #51C3F2 96.5%);
    opacity: 0.2;
    border-radius: 10px;
    font-weight: 400;
  }
  .form__search input::placeholder{
    color: #000 !important;
    font-weight: 600;
  }

Опасити нужен для подходящего цвета градиента, но с ним текст становиться таким же, подскажите решение.

Comments

[Ankhena]

1. Использовать цвета в rgba (умно)
2. Задать градиент псевдоэлементу, а ему прозрачность (не очень умно)

Answer 1

[Андрей Мартынкевич]

Вот сайт с помощью которого вы можете перевести hex в rgba(Для использования цветов с прозрачностью)*тык*. Берем цвета(У вас это будут #2F81ED и #51C3F2) и переводим их в rgba, после чего в 4-ом атрибуте цвета указываем значение 0.2.
*Результат*

Answer 2

[Eugene]

1.
Обязательно обнови Figma. Она у тебя явно запоздалой версии т.к сейчас, если менять прозрачность цвета у цвета градиента - она автоматом выдает код в rgba

2.
Дай дизайнеру по башке, потому что этот дурачок просто уменьшил прозрачность у прямоугольника с градиентом до 20% - а так не делается. Надо было именно у цветов градиента уменьшать прозрачность.

Решение:
В твоем случае css будет таким

background: linear-gradient(80deg, rgba(47, 129, 237, 0.2) 0%, rgba(81, 195, 242, 0.2) 100%)

Я посмотрел в фигме по цветам.
Если обратишь внимание на свой же скрин, у тебя в колонке справа, выше, есть значение Colors.
И там оба этих цвета 100%. А значит мои догадки про то, что диз делал 20% опасити не у цветов, а у прямоугольника - верны.

Answer 3

[psiklop]

А еще hex в rgb можно перевести во многих графических редакторах, и даже в калькуляторе Windows если включить его в режим программист, задавая в css цвет background в rgba - 4 параметром идет прозрачность: rgba(255,255,255,0.5)