SharePoint modern pages - removing the shading from banner images

Steel Contributor

We have distinct branding requirements and found that banner images are shading out our colors. 


The two images below are not ours, but show what happens to ANY image used as a banner. Is there a way to remove the shading? It only appears when the 'Image and Title' layout is selected.  




When added to the banner:



31 Replies

@Andrew Warland 

Here's a screenshot of that which I'm talking about...Screenshot 2022-05-02 113923.png

@KylaAtTheLibrary The option to remove the background gradient is only available for the page title banner image. It is not an option for the images in the hero web part, but you are not alone in wanting this! You can upvote this item in the feedback portal: Hero Webpart - Option to remove gradient overlay · Community ( to add your vote to the existing feedback item.

Hello your solution dose not remove the gray area covering the images of the carousel web part.

@CandiceEGraham I don't see that toggle in the carousel web part



Oh, that's the HERO web part not the carousel web part.

@Leland Usher Unfortunately, SharePoint news carousel web part does not support "Show/hide background gradient" options.

Please consider giving Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

@Leland Usher Solution given by @cSesti does not remove gradient or image from news carousel web part.


It remove complete page header/image section from news/site pages itself, similar to this: SharePoint Online: Create a blank page without header & title 

Please consider giving Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

@Susan Hanley Please see the attached image.  Can you think of any way to remove this dreadful gradient from our news carousel as placed on our homepage?  Thanks

LOL, I had already figured this out but sure, I like the fact that you responded - thank you
Unfortunately, there is no way to do that in this context without something custom. If you want my snarky answer, it would be to not use a carousel for important news in the first place! Carousels do not test very well for usability and are generally not recommended from an accessibility perspective. You may want to consider a web part view for news that shows users all the content without having to wait or work for them to appear. I understand not wanting the gradient, but I guess I am asking whether you may want to do some re-thinking first. It’s not that I don’t use them ever, but you may want to look at for a fun way to learn more.
Thanks and I can appreciate your perspective, our Comms team has chosen this route with a limit of 4 articles at a time. I should one day run an analysis on click throughs to our articles but in the meantime, our company heavily utilizes this vehicle for important information for our employees and most of our employees want to read important information.
Hey guys,

I created a tutorial on removing the Carousel web-part shading via CSS.

Please see to perform yourself.