> Markdown version of [Generating Styles Dynamically (Flow)](https://vaadin.com/docs/v24/styling/styling-components/generating-styles-dynamically). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Generating Styles Dynamically (Flow)

CSS is inherently static, but sometimes you need to generate styles dynamically based on some custom logic. One way to do this is to use the `Style API` in Flow to set inline CSS properties on the root element directly, supplying either static or dynamically generated values:

```java
Button btn = new Button("Click me");
btn.getStyle().set("color", "white");
btn.getStyle().set("background-color", getRandomColor());
```

A drawback with this approach is that it’s not possible to apply styles to parts of components, or based on their states.

Another option is to use style properties – either the built-in [Lumo properties](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties.md) or [custom ones](https://vaadin.com/docs/v24/styling/advanced/custom-style-properties.md) – that are statically applied with normal CSS, but whose values are set through application logic:

```css
vaadin-button {
  color: var(--my-button-text-color);
  background-color: var(--my-button-bg-color);
}
```

```java
UI.getCurrent().getElement().getStyle().set("--my-button-text-color", "white");
UI.getCurrent().getElement().getStyle().set("--my-button-bg-color", getRandomColor());
```

The benefit of this approach is that you can target component parts and multiple components with the same style property. This can be used for example to load domain-specific styles in a white-labeled SaaS application, or to allow the user to customize UI styles, store them into a database, and load them when the user logs in.

> **Note: Style API Cannot Return Styles Applied through Stylesheets**
>
> The Style API in Flow, used through the `getStyle()` method, only works with *inline* styles – styles applied to the HTML element directly, as opposed to via stylesheets. This means that style getters, such as `getStyle().get(“color”),` only return values that have been applied using the Style API. It cannot return styles applied through stylesheets.

`97e4babd-1484-4e93-bf17-3fda6d4de8d1`