
Screen Flow in Salesforce is a powerful automation tool that enables users to create dynamic experiences with its intuitive drag-and-drop interface. Users can easily build screens using standard components, with the option to employ custom ones for specific use cases. While screen flow offers endless possibilities, as an automation tool, it prioritizes functionality over visually appealing screens. It is possible to employ CSS in order to enhance the UI of screen flows.
What is CSS?
Cascading Style Sheets (CSS) is a fundamental web technology that defines the presentation and layout of HTML documents. It allows developers to control the appearance of web pages by styling elements such as fonts, colors, and spacing.
Although it is not a standard option, it is possible to use custom solutions to control the CSS of screen flows.
In this post, you can find a custom component that lets you control the CSS of screen flows.
How to Use the Component
1- Install the component using the installation links below.
2- Add the "Style Overwrite" component to your screen element.
3- This component has only one input parameter: CSS String.

You have to enter a CSS to this parameter. It is possible to enter the CSS or use a text template. For instance, here is the Style Overwrite component with a text template called {!CSS}.

Here is the {!CSS} text template used in the component. It adds a background image to the flow screen.
This specific CSS code will apply a background image only to screen flows opened from a quick action - in a modal.

Here is the final result using this CSS code.

What can you do using CSS?
There are endless things that you can achieve using CSS. For instance, you can change the size of the screen, remove the close button (X), change the size/color of the fields, etc.
On the other hand, it is possible to use this component on Lightning pages as well. For instance, here is a case record page. This component makes the priority field bold, colorful, and bigger.

Here is the CSS used for this. You can replace the object name and field name in order to use it with other objects/fields.
div[data-target-selection-name="sfdc:RecordField.Case.Priority"] .slds-form-element__label {
font-weight: bold;
color: red;
font-size: 14px;
}
Considerations
This component has access to the CSS styling of the entire page. So, when used on a screen flow, If there are multiple screen flows on the page, it uniformly applies the CSS. However, when launching a screen flow via an action (and the screen flow opens in a modal), the CSS is exclusive to that particular flow. It is because the screen flow opens in a modal and only one screen flow can be opened at a time.
If you want to apply the CSS only for modal, you have to add a specific text to the CSS. Make sure that you add .uiModal to the beginning. You can see examples below (for instance, background image CSS code).
This component may require CSS knowledge. However, you can utilize the sample CSS codes provided in this post. Additionally, tools like ChatGPT can generate new ones for your specific use case.
Sample CSS Codes for Screen Flow
Increase the Modal Height
.uiModal flowruntime-flow {
max-height: 100% !important;
}
Set the Modal Width
.uiModal--medium .modal-container {
max-width: 400px !important;
}
Hide the Close Button
button.slds-modal__close.closeIcon {
display: none;
}
Increase the Text Area Fields' Height
textarea {
min-height: 300px !important;
}
Change the Color of Text Area Fields
textarea {
color: green !important;
font-weight: 800;
min-height: 200px !important;
}
Change the Navigation Bar's Color
.uiModal flowruntime-navigation-bar {
background-color: lightblue !important;
border-width: 0 !important;
}
Add a Background Image
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
Remove the Borders of the Flow
article.flowRuntimeForFlexipage {
border: none;
}
Change the Height of a Data Table
flowruntime-datatable .restrict-scroll {
max-height: 200px !important;
}
As mentioned above, if you want to apply the CSS to screen flows on the Lightning page, you can remove .uiModal from these CSS codes.
It is possible to apply multiple CSS codes at once. For instance, here is a flow screen with a background image and a grey navigation bar.

Here is the text template used for the CSS of this screen.
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
You can even use gif as a background image. For instance, here is a screen flow that creates a contact record from account.

Installation Links
Use this link to install in production or developer edition environments.
Use this link to install in sandbox environments.
Hello,
Thanks for this. Any idea what should do if the CCS is not working? I installed the package, added it to my screen flow, created the text template variable and I cannot see the background.
Any help will be appreciated.
How are you launching the flow? Are you using a quick action (so that it opens in modal)?
Can you send me the CSS code that you are using?
Hi Yumi.
I removed the modal code because I don“t launch the flow using quick action. I have this flow in an experience site, but still, the background is not showing.
This is the code:
flowruntime-flow {
background-image: url("https://kalazanature-dev-ed.develop.file.force.com/servlet/servlet.FileDownload?file=015Hu000004yZxC") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi,
I think your experience site might be blocking this image.
Hi Yumi,
I'm experiencing the same problem. I can launch the screen flow from an object or in a list view through an action. I've followed along and use the code in this post. However, when launching the flow, the code doesn't show.
Can you send me the CSS that you used?
Hi Yumi,
I've used this code:
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
How are you launching the flow? Is it from an action?
Since there is .uiModal in the CSS code, it applies to modal only.
I'm launching it from an action on the record page.
Can you check your text template (for CSS) in plain text mode? Make sure that there are no extra HTML tags like
Thanks Yumi! that was it, there were some tags in there.
Great!
Very Creative!
How would I make this work for a screen flow that is displayed directly on a record detail page of an experience cloud site? There is no action to call the flow.
You can use the same CSS code but without .uiModal
Hello Yumi, thanks for sharing this is really helpful! However, it worked for me without modal option. But when I am trying the same with modal it did not.
Code:
uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi,
Please make sure that there is a dot before uiModal
So it should be like this: .uiModal and not uiModal
Thanks for sharing this, Yumi. This is a very valuable tip.
It worked for me after making sure that the text template (for CSS) is in plain text mode (Rich Text by default). And also stating the obvious, the new version of the flow needs to be activated.
That's great! I am happy that it worked.
Hi Yumi - should this work for a flow that is automatically launched when a page is open? I am testing this in a community
What is the code for non-modal? Should the following work?
.flowruntime-flow {
background-color: yellow;
}
Hi,
You can use this:
flowruntime-flow {
background-color: yellow !important;
}