We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change default color gradient of sidebar

Hi, I am trying to change the default gradient color of the nav bar menu.

I can't figure out how to do it.

In the site css I tried to change colors in

.sidebar {

    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);


with no effects.....

3 Replies

SS Sivakumar ShunmugaSundaram Syncfusion Team December 9, 2022 04:58 PM UTC

Hi Franco,

Greetings from Syncfusion support.

You can change the background of the Blazor sidebar by using the below CSS styling. Also, we have attached the documentation to customize the background of our Syncfusion Blazor Sidebar component for your reference.

Refer to the below code snippet.



<div class="page">

    <div class="sidebar">

        <NavMenu />







    background-image: linear-gradient(180deg, rgb(255, 0, 0) 0%, #FF0000 70%) !important;




Documentation: https://blazor.syncfusion.com/documentation/sidebar/style


Check out the attached sample for your reference.

FS Franco Simonini December 18, 2022 12:15 PM UTC

Thank you very much.... I feel so silly I didn't try by myself the !important annotation

IL Indhumathy Loganathan Syncfusion Team December 20, 2022 04:53 AM UTC

Franco, We are glad that your reported query has been resolved. Please get back to us if you need any further assistance.

Live Chat Icon For mobile
Up arrow icon