Box shadow as gradient borders with css?

Question

I want shadow borders á la windows 10 around my moveable div elements. It can be done with box-shadow like

  <style>
     .box {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        cursor: move;

        background-color: green;
        box-shadow: 0px 0px 20px 10px #ccc;
     }

     .box2 {
        left: 200px;
        top: 200px;

        background-color: blue;
     }

  </style>

  <div class="box"></div>

  <div class="box box2"></div>

Drawback is that the shadow is not a part of the div element in the same way as a border, so if you attach an event listener to the div to listen for mouseovers it won't detect any in the shadow area, but only when you move the mouse inside the element. In my (touch) application I'm letting the user move and resize the elements and therefore I need a rather wide touchable area around the element to facilitate the grabbing. A wide opaque border looks to clumsy for this in my opinion.

I've seen many examples of using border-images and linear gradients, however I haven't manage to mimic the look of box-shadows/windows 10 borders.

Is there any way to do this with border-images or in any other not overly complicated way?

I'm afraid it will be overly complicated using a wrapper around the box, needeing to calculate coords between them in order to move around the boxe(s) — user1453235
Yes, it is little complicated, but as far as i know else is not possible. Still wait if you get some better Answer. — divy3993
@user1453235 Here is a similar question and answer - stackoverflow.com/questions/31333668/…. You can make the shadow area clickable by making it an inset shadow. You may need extra tweaking to get it work the exact same way as a normal shadow but it doesn't need any extra elements. — Harry
I'm leaning towards a gradient image border. Thing is I haven't managed to apply a single gradient border image to all 4 sides though. Maybe I'll have to create a separate image and slice it up in parts with the border-image-slice property as described link — user1453235

divy3993 divy3993 · Accepted Answer · 2015-09-09T18:37:51

This is possible only by wrapping the div box in another.

Here i am using span with class and wrapping the box giving the mouse:move property to span class rather giving it to box and padding to span class so it would leave some space where box-shadhow is present.

So it looks like you are hovering on shadow, but actually its cover to box on which you hover and get feeling that you hovered on box.

DEMO

HTML

<span class="cover"><div class="box"></div></span>
<span class="cover2"><div class="box"></div></span>

CSS

.box 
{
    display:block; 
    box-shadow: 0px 0px 20px 10px #ccc;
    height:100%;
    width:100%;
}

.cover
{    
    display:block;       
    cursor: move;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    padding:15px; /* This is the trick */
}

.cover2
{
    display:block;       
    cursor: move;
    position: absolute;
    top: 200px;
    left: 200px;
    width: 200px;
    height: 200px;
    padding:15px; /* This is the trick */
}

.cover .box
{
    background-color: green;
}

.cover2 .box
{
    background-color: blue;
}

Box shadow as gradient borders with css?

1 Answers