Photoshop Question posted in
The official user guide can be found here.

How to do a shadowed border on a form input? – Photoshop

Hello I am tasked to make an input field look like the screenshot below:

enter image description here

I can do everything except the border shadow thing. Is this possible using css?

In the photoshop file, this layer is given an “Inner Glow” and this is responsible for the border shadow.

Here is a screenshot of the layer style:

enter image description here

Here is my css so far just incase it is needed:

#input_1_1 {
    background-color: #f1f5f6;
    border-radius: 12px;
    height: 47px;
    padding: 0 17px;
}

Thanks!

Tags:

2

Answers


  1. 0

    You need to use box-shadow–just play around with the values until you match the mockup.

    input {
   box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
    Login or Signup to reply.
  2. 0

    Something like this:

    #input_1_1 {
    background-color: #f1f5f6;
    border-radius: 12px;
    height: 47px;
    padding: 0 17px;
  border: none;
  box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.4);
}
    <input id="input_1_1" type="text" name="name">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search