How to add in gradient colours to your flow

Want to spice up your colour scheme with some gradients? We can change the colour of:

The Colour Blocks

The Button

The Progress Bar

To start, drag an "Embed Component" into your flow. There will be a code snippet that appears on the left-hand side:

For the right-hand colour block:

Replace what is in the code-snippet with the below code:

⚠️ In the code, there are two hex codes (six-figure combinations starting with a hashtag. These are the two colours of the gradient. Change the code to the colours of your choice.

<style>
.dark {
    background-image: linear-gradient(to bottom right, #6d4dd1, #924ad4);
}
</style>

For the button:

Replace what is in the code-snippet with the below code:

⚠️ In the code, there are two hex codes (six-figure combinations starting with a hashtag. These are the two colours of the gradient. Change the code to the colours of your choice.

<style>
.button.primary.submit {
    background-image: linear-gradient(to bottom right, #6d4dd1, #924ad4);
}
</style>

For the progress bar:

Replace what is in the code-snippet with the below code:

⚠️ In the code, there are two hex codes (six-figure combinations starting with a hashtag. These are the two colours of the gradient. Change the code to the colours of your choice.

<style>
.progress {
    background-image: linear-gradient(to bottom right, #6d4dd1, #924ad4);
}
</style>

You'll then see the gradient appear:

Have a specific component in mind? Our Customer Success champions are available by clicking on the chat bubble on the bottom right of our app or emailing support@upflowy.com. You can even book a call with them for a 1:1 session at a time you prefer.