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>
3 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.

3 Likes
4

Thank you for this tip :slight_smile: but I don’t think css it is accessible for free users like me :frowning:

5

Make sure you dont have access to this section:

image
image814Ă—757 60.2 KB

1 Like
6

I’m away from the PC but if I remember I don’t have access to this function in the free plan.

7

Plus 1 for adding this feature to softr!

AHA

8

For ppl who are looking for adding a gradient aboce a image for hero block for example :

document.addEventListener("DOMContentLoaded", () => {
    // Sélectionne l'élément dont la classe commence par "hero1"
    const heroElement = document.querySelector('[class^="hero1"]');
    
    if (heroElement) {
        // Récupérer l'image de fond existante
        const currentBackground = heroElement.style.backgroundImage;

        // Ajouter le linear-gradient tout en conservant l'image existante
        heroElement.style.backgroundImage = `linear-gradient(0deg, rgba(41,41,41,0.3029412448573179) 31%, rgba(41,41,41,0.49341743533350846) 76%), ${currentBackground}`;
    }
});

This code select a block with a class starting with hero1, get the image add the linear gradient (get yours here : https://cssgradient.io/) ans set back the inline css.