Probably super easy, but struggling to change the background color of a Lighting-Card. Any Suggestions? I can get it to change in the console by manipulating element.style


    <div class="myColor">
        <lightning-card title="Opportunity Relisting" icon-name="standard:channel_program_history">
            <template if:true={opp.data}>

                <div class="slds-m-around_medium">
                    <h1>RELISTED OPPORTUNITY</h1>



.myColor.THIS  {
    background: red;



What I'm trying to get is this... enter image description here

This one is the current behavior I have... enter image description here

  • @martin lezer thanks for the edits.
    – thinker
    Oct 28, 2019 at 13:52
  • I do not think this is an exposed attribute for either Aura or LWC. So your solution of modifying the background via CSS is the only way. Oct 28, 2019 at 13:53
  • Thanks Bryan, can you give me a little more insight?
    – thinker
    Oct 28, 2019 at 14:00
  • When looking at the documentation developer.salesforce.com/docs/component-library/bundle/…, there is no attribute to modify the background color specifically. However, you can specify a custom CSS class like you are doing. Oct 28, 2019 at 14:18
  • 1
    Understood. You may just have to build your own card component manually using the template defined on the SLDS website (lightningdesignsystem.com/components/cards) and then add an inline style to the article element and then expose it as an attribute to modify depending upon your use case Oct 28, 2019 at 14:53

3 Answers 3


you can try this, it will work ! :

:host {
    --sds-c-card-color-background: #a1d6e4;
  • This worked in Salesforce. It's not working in LWC local dev server though.
    – smukov
    Sep 17, 2021 at 10:46

One of the ways to customise lightning-card is passing slots that are styled as you wish, for example:

                    <header slot="title" class="slds-page-header slds-page-header_record-home">
                        GroupName 1

enter image description here

  • Nope, this does not work: only part of the header has a grey background and the font is not bold. Jul 9, 2020 at 13:16

Bryan Anderson in the comments below should get the credit for this, so feel free to repost Bryan so I can give you the points.

You have to do a manual build of the LWC to get this feature, at least with the knowledge I have, that is what it took.

  1. https://www.lightningdesignsystem.com/components/cards/

Copy this code:

        <article class="slds-card">
    <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
    <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-standard-account" title="account">
    <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
    <span class="slds-assistive-text">account</span>
    <div class="slds-media__body">
    <h2 class="slds-card__header-title">
    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
    <div class="slds-no-flex">
    <button class="slds-button slds-button_neutral">New</button>
    <div class="slds-card__body slds-card__body_inner">Anything can go into the card body</div>
    <footer class="slds-card__footer">
    <a class="slds-card__footer-action" href="javascript:void(0);">View All
    <span class="slds-assistive-text">Accounts</span>

Then mark the 'slds-card' with the background selector and change the color in a CSS file or Inline-Style (didn't try inline but assuming it will work).

I don't like this solution but it appears to be the only way to get it to work.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.