CODEWITHSUNDEEP
htmlcssfrontend
Cri
Cri

Reputation: 17

CSS Blur bleeding

I cannot for the life of me figure out how to do this: subscription box.

Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.

It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.

Example of the code for the box and the gradient can be found here

pastebin^

Upvotes: 0

Views: 292

Answers (2)

JonoJames
JonoJames

Reputation: 1223

although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element

.oneside{

   -moz-box-shadow:    inset  0 6px 6px -6px black;
   -webkit-box-shadow: inset  0 6px 6px -6px black;
   box-shadow:         inset  0 6px 6px -6px black;
   border-radius: 4px;
  }

  .allaround{
          -webkit-box-shadow: inset 0 0 5px #000000 ;
          -moz-box-shadow: inset 0 0 5px #000000 ;
          box-shadow: inset 0 0 5px #000000 ;
            border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
        <head>

        <body>
 <input class="oneside">
one side
</input>
</br>

<input class="allaround">
all around
</input>

        </body>
</html>

Upvotes: 0

sstavridis
sstavridis

Reputation: 46

Maybe this one helps you

box-shadow: 0px 30px 10px 0px #EBEBEB ;

Also, you can see more here

Upvotes: 1

Related Questions