Add gradient color to Retool header via Custom CSS

couldn't apply css for the header

._retool-Header { background-color: yellow; }

Hi @harshinim! Is this for the header component? If so, can you use the style options in the right panel?

If it's for something else, can you share a screenshot?

Yeah.. that is header component and i am trying to add gradient color as background

Thanks, @harshinim!
Can you try this:

.EditorPageLayout__header-inner, .ViewerPageLayout>header{ background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12) !important }

Yes. I'll let u know.. thank u

It worked..!!! Thank you :blush:

Awesome! :raised_hands:

1 Like

couldn't even apply the css

for main component and even for the container

please help..!!!

Hi @harshinim! Did you want the main component and container to have the gradient as well?

yes.... i couldn't understand,where am it is doing wrong

can u please help.. how to apply css for different components... the css what i have learnt is not working here.

Hi there. You'll want to use the developer tools in your browser to find the right css class, and you'll want to do this in both editor and preview mode (if you're on a paid plan):

ohh okay... will try that... and am i just started with retool... soo....

thank u for the help

couldn't see any change

not working..!!!

Hi @harshinim! What is the behavior you're seeing? Out of curiosity, are you able to update the background to a single color using custom CSS (instead of a gradient)?

Custom CSS can be fairly tricky to set up and maintain in Retool, which is why we try to have a lot of layout/color options built in to our component Inspector. It can take some trial & error to make sure you're referencing the correct class (not id) in your custom css.

We try not to make changes to CSS classes, as it can break existing custom CSS, but keep in mind that it's possible that there could be CSS class changes that impact your custom settings.

it is not working in my case.i wrote the same.