Shadow Behind Widgets

Hi there,

Try this CSS:

.sidebar .widget {
    box-shadow: 10px 10px 27px 0 rgba(0,0,0,.25);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

Nice, How to add a bit hover effect into it, so that if anyone hovers on sidebar widgets so the shadow will glow a bit more...

Hi there,

in addition to Leos code add the following CSS:

.sidebar .widget:hover {
    box-shadow: 10px 10px 27px 0 rgba(0,0,0,.25); 
}

Change the box shadow values for the effect you want on hover.

its simple adding shadow towards the right and bottom only, i want it like glow (L+R+T+B) for all..

Refer sample of the box in (P-Section), shadow glow during hover -

You can use this site to generate the box shadow CSS you require:

https://cssgenerator.org/box-shadow-css-generator.html

Generated below but not happy -

box-shadow: 4px 1px 13px 2px rgba(34,0,34,0.75);
-webkit-box-shadow: 4px 1px 13px 2px rgba(34,0,34,0.75);
-moz-box-shadow: 4px 1px 13px 2px rgba(34,0,34,0.75);

So have to ignore this topic too..... The Last try guide me, can we highlight the corners of the widget only something like this (P-Section refer) -

Thats much more complicated then a single box shadow property. You would need to do something like this:

.sidebar .widget {
    position: relative;
}
.sidebar .widget:before {
    left: 5px;
    transform: rotate(-5deg);
}
.sidebar .widget::after {
    right: 5px;
    transform: rotate(5deg);
}
.sidebar .widget::before, .sidebar .widget:after {
    content: '';
    bottom: 10px;
    height: 20px;
    position: absolute;
    z-index: -1;
    background: transparent;
    width: 50%;
    box-shadow: 7px 6px 15px #333;
}

BUT .... you have a widget with position: sticky; the above style will not work correctly with this as the shadow boxes will always be displayed in front of that widget.... and theres not anything we can do to change that.

No...It's making the sticky section worse, Leave it.... Thanks a Ton again you helped a lot....Thanku So Much David.

I need to find out the solution for sticky first...

Unfortunately there is no solution for that with the Sticky Element it would require completely different HTML for that widget.....

Glad to be of help.

or can we add a line to ignore sticky last-child widgets ??

okay fine..

You can try this:

.sidebar .widget:not(:last-child) {
    position: relative;
}
.sidebar .widget:not(:last-child):before {
    left: 5px;
    transform: rotate(-5deg);
}
.sidebar .widget:not(:last-child)::after {
    right: 5px;
    transform: rotate(5deg);
}
.sidebar .widget:not(:last-child)::before, .sidebar .widget:not(:last-child):after {
    content: '';
    bottom: 10px;
    height: 20px;
    position: absolute;
    z-index: -1;
    background: transparent;
    width: 50%;
    box-shadow: 7px 6px 15px #333;
}