Gradient for background color

Feature Requests
1

Right now, for sections, we can only choose a single color, not a gradient:

Screenshot 2023-09-01 at 19.49.29

Seems it would be really easy to let us choose a gradient.

The alternative is to use a background image, and that is bad - either adds latency or pixelation.

2

Yes, having the option to choose a gradient as bg color for a block would be cool.

However you still can use the gradient you want for your blocks, but it must be added as custom code on your page. Try this:

<style>
#replace-with-your-block-name section { background: rgb(136,26,141);background: linear-gradient(0deg, rgba(136,26,141,1) 0%, rgba(106,12,127,1) 100%); }
.horizontal-list-item { background: rgb(253,210,255); background: linear-gradient(0deg, rgba(253,210,255,1) 0%, rgba(223,201,224,1) 100%); }

</style>
2 Likes
3

Thanks, Jonathan

That also works.

However, it creates a lot of custom code (that needs to be maintained and updated), and “No code” is a big part of the appeal of Softr.

The only way to keep the custom code to a minimum is to put it at the site level, but that creates other problems - it doesn’t actually render with the style until it’s published, and it’s less predictable.

1 Like