Стилизовать input с эффектом выдавливания в соответствии с макетом CSS

Question

На макете поля input оформлены следующим образом:

Третий день играю с box-shadow inset, не могу подобрать нужные значения чтобы повторить макет. Помогите, пожалуйста стилизовать input.

Answer 1

Как я понимаю Вы хотите воспроизвести Emboss эффект:

input {
  display: block;
  border: none;
  border-radius: 20px;
  padding: 5px 8px;
  color: #333;
  box-shadow: 
    inset 0 2px 0 rgba(0, 0, 0, 0.2), 
    0 0 4px rgba(0, 0, 0, 0.1);
}

input:focus { 
  outline: none;
  box-shadow: 
    inset 0 2px 0 rgba(0, 0, 0, 0.2), 
    0 0 4px rgba(0, 0, 0, 0.1),
    0 0 5px 1px #51CBEE;
}

<input placeholder="Введите текст">

Answer 2

body {
  background: #1480a7;
}

input, textarea {
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
  border: 0;
  padding: 8px;
  background: #0f6586;
  color: #fff;
  font: inherit;
  box-sizing: border-box;
  box-shadow: 
    5px 5px 10px -3px rgba(0,0,0,.35) inset,
    3px  3px 1px -2px #005775 inset,
    -3px 3px 1px -2px #005775 inset,
    3px  -3px 1px -2px #6dc2e7 inset,
    -3px -3px 1px -2px #6dc2e7 inset;
}

input:not(:last-child), textarea:not(:last-child) {
  margin-bottom: 10px;
}

<input type="text" placeholder="Name"><br>
<input type="email" placeholder="email address"><br>
<input type="tel" placeholder="phone"><br>
<textarea type="text" placeholder="Message"></textarea>

БЛОГ НА HUSL

Стилизовать input с эффектом выдавливания в соответствии с макетом CSS

Ответы (2 шт):