Is it possible to get color gradient as content panel background color?

Anvil Q&A
1

Hi,

Anvil allows us to select the background color for various components such as the self.content_panel.

However I was wondering whether it is possible to set the background color as a gradient color theme instead of just one colour.

Is this possible ?

2

Sure. You’d probably need to explore
https://www.w3schools.com/css/css3_gradients.asp

And then combine those ideas with roles
https://anvil.works/docs/client/themes-and-styling

2 Likes
3

Here is a solution I came up with to set this dynamically in the client code:

def set_color_gradient(self, component, colors=['white', 'black'], default_bg_color=None, angle=90):
    try:
      node = anvil.js.get_dom_node(component)
      node.style.backgroundImage = f"linear-gradient({angle}deg, {', '.join(colors)})"
      if default_bg_color:
        component.background = default_bg_color
      else:
        component.background = colors[-1]
      print('Node Color', node.style.backgroundImage)
    except Exception as e:
      print(f"ERROR set_color_gradient: {e}")
1 Like