#Footer elevation

1 messages · Page 1 of 1 (latest)

deft gorge
#

There is a shadow right now?!

fickle dove
#

Yeha but 8% opacity

deft gorge
#

OMG yeah it's barely not visible

CleanShot_2026-04-02_at_15.53.11.png
mighty harbor
#

The predefined shadows we have are too mild

fickle dove
#

8% opacity is good for card but for overlay element it's too small

mighty harbor
#

This is actually the most visible one 😄

deft gorge
#

especially for this section becuase it's very goal of existance is to float across other sections 😅

#

Too bad it does not support the new
background:

🤣

#

I just tried

#

Is there a theme variable for me to jsut try?

#

If possible a variable only for that footer?

#

(IF not a generic one would do)

mighty harbor
#

--ha-box-shadow-l it's generic but only used by the footer now

fickle dove
#

With 28% opacity

CleanShot_2026-04-02_at_15.57.20.png
deft gorge
#

Thx @mighty harbor and what's the syntax to change it?

#

it's in % ?

fickle dove
deft gorge
#

oh wow ok

#

Thx

mighty harbor
#

The current value is 0 8px 12px 0 #00000014

fickle dove
#

Box shadow has lot of parameters 😅

#

We should have --ha-view-footer-box-shadow and we should default to --ha-box-shadow-l

mighty harbor
#

How about something like --floating-element-shadow? I feel like the fab should have a common shadow with the footer. Not a strong opinion though

deft gorge
#

NOt able to test on my side..

#

But fine, i trust you

#

tried to add

  ha-box-shadow-l: 0px 0px 30px 20px rgba(0,0,0,0.3)

To my theme

#

nope

fickle dove
#

Oh I think I know why...

# 
export const semanticStyles = css`
  html {
    --ha-box-shadow-s: var(--ha-shadow-offset-x-sm) var(--ha-shadow-offset-y-sm) var(--ha-shadow-blur-sm) var(--ha-shadow-spread-sm) var(--ha-color-shadow-light);
    --ha-box-shadow-m: var(--ha-shadow-offset-x-md) var(--ha-shadow-offset-y-md) var(--ha-shadow-blur-md) var(--ha-shadow-spread-md) var(--ha-color-shadow-light);
    --ha-box-shadow-l: var(--ha-shadow-offset-x-lg) var(--ha-shadow-offset-y-lg) var(--ha-shadow-blur-lg) var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
    --ha-box-shadow-xl: var(--ha-shadow-offset-x-xl) var(--ha-shadow-offset-y-xl) var(--ha-shadow-blur-xl) var(--ha-shadow-spread-xl) var(--ha-color-shadow-light);
  }
`;
#

We compute this variable so it can't be overriden

mighty shuttle
#

ha-box-shadow-l: "0px 0px 30px 20px rgba(0,0,0,0.3) !important" gogogo

deft gorge
#

or I override every little variable?

fickle dove
#

@deft gorge Yes but that's mean you will change the color for every shadow

deft gorge
#

ok check

#

I'll wait

mighty shuttle
#

btw did you add multiple cards to the footer thing @deft gorge ? wouldn't we expect the footer "wrapper" to have the shadow and perhaps even a bit of a background?

deft gorge
#

It's a vertical stack

#

I'm just testing for now

#

But the shadow confused me so I stoped testing 😄

fickle dove
#

I did a small reseach :

Shadow opacity for overlay elements:

Material Design 3 — Level 5 (modals) → 15% + 30% (2 layers)
Fluent 2 (light) — shadow64 (dialogs) → 20% + 24% (2 layers)
Fluent 2 (dark) — shadow64 (dialogs) → 40% + 48% (2 layers)
Tailwind — shadow-2xl → 25%
Carbon / IBM — Dropdowns → 30%
Ant Design — Dropdowns → 8% + 12% + 5% (3 layers)

#

Most design systems use multi layer box shadow :

box-shadow:
  0 2px 4px rgba(0,0,0,0.15),   
  0 8px 24px rgba(0,0,0,0.10);
fickle dove
#

Needs design review of course

deft gorge
#

@gritty perch ping 👋

gritty perch
#

Ooh I do like it.

This is a good case for #designers channel. Forwarding it there to get some feedback.