are you using the “default” theme, or a custom one?
if you are just using the default theme, I’ve already created some custom themes to restore the default theme…
you can get them from here:
If you want to modify your existing / current setup without using themes, try this:
ha-card-box-shadow: "0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"
works, thank you
Mushroom theme does it with this:
ha-card-border-width: 0
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
I used darkmix theme and i don’t manage to remove new outline in lovelace.
It’s horrible:
I’ve tried:
# Cards
ha-card-border-width: 0
ha-card-box-shadow: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
but without success.
Any ideas?
Thanks inadvance.
Regards,
Alessandro
Have you tried
ha-card-border: 0px
Unfortunately not.
It’s so horrible!
Here is my darkmix theme:
darkmix:
#button #"#f2f0fa"
deactive-background-button-color: "#333336"
bar-card-card: 'var(--primary-color)'
# Main colors
primary-color: '#03A9F4'
accent-color: 'red'
dark-primary-color: 'var(--primary-color)'
light-primary-color: 'var(--primary-color)'
ha-card-border-radius: '20px'
# Text colors
primary-text-color: 'white'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: 'silver'
disabled-text-color: 'silver'
label-badge-border-color: 'orange'
# Background colors
primary-background-color: '#141A32'
secondary-background-color: '#141A32'
divider-color: 'var(--primary-color)'
# Table rows
table-row-background-color: 'var(--primary-background-color)'
table-row-alternative-background-color: 'var(--primary-background-color)'
# Nav Menu
paper-listbox-color: 'var(--primary-color)'
paper-listbox-background-color: 'var(--primary-background-color)'
paper-grey-50: 'var(--primary-text-color)'
sidebar-icon-color: 'var(--primary-color)'
sidebar-background-color: '#141A32'
# Paper card
paper-card-header-color: 'var(--primary-color)'
paper-card-background-color: 'rgba(0,0,20,0.4)' #"#1E2747"
paper-dialog-background-color: 'var(--primary-background-color)'
paper-item-icon-color: 'var(--primary-color)'
paper-item-icon-active-color: 'orange'
paper-item-icon_-_color: 'orange'
paper-item-selected_-_background-color: '#282C34'
paper-tabs-selection-bar-color: 'orange'
# Labels
label-badge-red: 'var(--primary-color)'
label-badge-text-color: 'var(--primary-text-color)'
label-badge-background-color: 'var(--paper-card-background-color)'
# Switches
paper-toggle-button-checked-button-color: 'var(--primary-color)'
paper-toggle-button-checked-bar-color: 'var(--primary-color)'
paper-toggle-button-checked-ink-color: 'var(--primary-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: 'var(--primary-color)'
paper-slider-knob-start-color: 'var(--primary-color)'
paper-slider-pin-color: 'var(--primary-color)'
paper-slider-active-color: 'var(--primary-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: 'red'
google-green-500: 'orange'
# Date picker
lumo-primary-text-color: 'var(--primary-color)'
lumo-body-text-color: 'var(--primary-color)'
lumo-primary-color: 'var(--primary-color)'
paper-grey-200: 'var(--paper-card-background-color)'
# Card background
card-background-color: '#141A32'
# Cards
ha-card-border: 0px
ha-card-box-shadow: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
#=== blurring-background-behind-popup
dialog-backdrop-filter: blur(5px)
dialog-border-radius: 1em;
dialog-box-shadow: 0em 0em 0.5em;
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
mdc-dialog-box-shadow: 0em 0em 0.5em
mdc-shape-medium: 1em
Any help is appreciated.
Thanks in advance,
Alessandro
Did anyone figure this out?
I have:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
subtitle: >-
{{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
now().strftime('%d') }}
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 12px 12px 3px;
}
.title {
font-size: 34px!important;
spacing: 100px;
}
.subtitle {
font-size: 25px!important;
}
ha-card {
height: 98px !important;
}
ha-card-border: 0px
}
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
}
ha-card-border-width: 0
}
ha-card-box-shadow: 0px
}
with no luck:
that’s your box-shadow not border
I have this too:
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
It’s at the end of the code I posted above
Is that wrong?
You’re giving it a black shadow… Do you want the shadow?
first of all - thanks for you help 
I don’t want any shadows or colours - just a transparent card with no borders or shadows.
Is this possible?
Yes it is, but every card is different and you have to provide the card with no shadow. This may or may not work, it depends on your card selector.
ha-card-box-shadow: none
yeah sadly that didn’t work. I dont under stand why this was never an issue for the last year or so - a new update has changed something
The entire frontend was changed in the past year. When dealing with custom solutions, you have to keep up with updates when HA changes.
This has only happened I. The last week or two. I’m happy to change - I just don’t know where to start haha
You should probably ask this in the custom-mushroom card thread instead
This is how I make my chip cards transparent with no border:
card_mod:
style: |
ha-card {
--chip-border-width: 0;
--chip-background: none;
--chip-height: 40px;
--chip-padding:7px;
}
Of course you have to have card mod installed. I have also done in to Custom Button Cards like this:
styles:
card:
- height: 106px
- width: 152px
- border-style: none
- background-color: transparent
Hope this can help someone.