Shadows for layers

[justinesmithies]

Is it possible to add shadows to a layer kind of like blururl ?
I use Eww with Hyprland and they ho together perfectly but I would really love to be able to apply the same shadows that windows get.

[vaxerski]

You can apply shadows to eww via css?

[justinesmithies]

Yeah sorry I finally worked it out. Ooops ;)

[B21q]

As? Shadows via CSS look strange, as if they don't flow and end up becoming a border.

[EvanKoe]

Don't hesitate to share what worked for you ! I'm struggling with this too !

[B21q]

Don't hesitate to share what worked for you ! I'm struggling with this too !

I managed to make it work, I took a setting that had shadows and removed everything except the properties

Config: https://reddit.com/r/hyprland/s/FZfQVFBDZ8

[AymanLyesri]

If we add a shadow using CSS while having a blur effect active for that layer, the shadow will also be blurred. Therefore, we need a native way to apply a shadow to the layer without the blur affecting it.

[vaxerski]

ignorealpha exists

[AymanLyesri]

already tried it, dosent work well with shadows

# layerrule = blur, notifications
layerrule=ignorealpha[0.97],notifications
layerrule=ignorealpha[0.97],right-panel
layerrule=ignorealpha[0.97],bar
layerrule=ignorealpha[0.97],media <-- this one
layerrule=ignorealpha[0.97],wallpaper-switcher
layerrule=ignorealpha[0.97],app-launcher
layerrule=ignorealpha[0.97],progress

layerrule=animation fade,hyprpaper
layerrule=animation fade,selection
# layerrule=animation fade,notifications

blurls=bar
  blurls=right-panel 
  blurls=notifications
  blurls=media <-- this one
  blurls=wallpaper-switcher
  blurls=app-launcher
  blurls=progress

[vaxerski]

honestly idk whats going on in that picture.

At any rate, shadows around layers server-side barely make any sense anyways.

Generally, the solution would be https://gitlab.freedesktop.org/wayland/wayland-protocols/-/merge_requests/272 but it's stuck in wayland hell

or we could just use the kde extension https://wayland.app/protocols/kde-blur but idk what the support looks like

[AymanLyesri]

honestly idk whats going on in that picture.

ignorealpha with blurls blurs the shadow around the picture resulting in a dark circle

this one without blur active, see the difference

[vaxerski]

oh yeah thats how it works, you just gotta adjust the alpha to be just right, I guess

[charlesrocket]

You cannot match the compositor's shadows with css. Switch to niri fixed my issue with the bar.