<![CDATA[Add fade to transparent background on module.]]>I followed this thread to add transparent backgrounds to my custom.css

Is it possible to set a fade to the background similar to how the default calendar and weather have a fade?

Thanks.

.module.calendar {
     background-colour:rgba(0,0,0,0.1);
     border-radius:10px;
     padding:4px;
}
]]>https://forum.magicmirror.builders/topic/14693/add-fade-to-transparent-background-on-moduleRSS for NodeTue, 15 Sep 2026 12:05:05 GMTWed, 24 Feb 2021 00:07:36 GMT60<![CDATA[Reply to Add fade to transparent background on module. on Thu, 04 Mar 2021 12:44:17 GMT]]>

@bkeyport Thank you! I realized after I made the post it is called gradient.

For future knowledge

change background-color to background-image and add linear-gradient with another RGBA value.

Thank you for your help.

Is there a way to have CSS go gradient to the left and to the right?

I have the news module at the bottom and I really just want it to be dark in the centre where the headlines are.

I have tried to right and to left, I have tried radial and nothing seems to work.

]]>https://forum.magicmirror.builders/post/89114https://forum.magicmirror.builders/post/89114Thu, 04 Mar 2021 12:44:17 GMT<![CDATA[Reply to Add fade to transparent background on module. on Sat, 27 Feb 2021 01:45:16 GMT]]>@bkeyport said in Add fade to transparent background on module.:

when you pray to the CSS gods, you’re praying to @cowboysdude

Oh hell no! :-)

]]>https://forum.magicmirror.builders/post/88922https://forum.magicmirror.builders/post/88922Sat, 27 Feb 2021 01:45:16 GMT<![CDATA[Reply to Add fade to transparent background on module. on Sat, 27 Feb 2021 01:44:20 GMT]]>@bkeyport said in Add fade to transparent background on module.:

@mykle1 … when you pray to the CSS gods, you’re praying to @cowboysdude 🤣🤣🤣

Welllllllllllllllllllllllll CSS and I have a complicated relationship LOL

]]>https://forum.magicmirror.builders/post/88921https://forum.magicmirror.builders/post/88921Sat, 27 Feb 2021 01:44:20 GMT<![CDATA[Reply to Add fade to transparent background on module. on Thu, 25 Feb 2021 18:34:29 GMT]]>@mykle1 … when you pray to the CSS gods, you’re praying to @cowboysdude 🤣🤣🤣

]]>https://forum.magicmirror.builders/post/88878https://forum.magicmirror.builders/post/88878Thu, 25 Feb 2021 18:34:29 GMT<![CDATA[Reply to Add fade to transparent background on module. on Thu, 25 Feb 2021 13:35:42 GMT]]>@cowboysdude said in Add fade to transparent background on module.:

easy peasy…here’s an example:

Easy for a genius like you. :thumbsup:

]]>https://forum.magicmirror.builders/post/88870https://forum.magicmirror.builders/post/88870Thu, 25 Feb 2021 13:35:42 GMT<![CDATA[Reply to Add fade to transparent background on module. on Thu, 25 Feb 2021 02:43:35 GMT]]>@jamaces easy peasy…here’s an example:

.MMM-YahooWeather .fade {      
  	-webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
   height:  120px;
  }

The magic is in the fade… gives you this effect: [see bottom of 4 days forecast]

1.png

]]>https://forum.magicmirror.builders/post/88859https://forum.magicmirror.builders/post/88859Thu, 25 Feb 2021 02:43:35 GMT<![CDATA[Reply to Add fade to transparent background on module. on Wed, 24 Feb 2021 08:40:10 GMT]]>Take a look at https://www.w3schools.com/css/css3_gradients.asp - you might be able to get something working through that… RGBA values seem to work there.

The text gradients they do is different. :)

]]>https://forum.magicmirror.builders/post/88839https://forum.magicmirror.builders/post/88839Wed, 24 Feb 2021 08:40:10 GMT