Linear gradients with more steps

I Need Help
1

I’m trying to recreate some gradient visual effects from my old site. I am VERY new to both Blocs and CSS, so apologies in advance.

In Blocs, can the class editor option for gradients be used for the following?

.graygradient {
	background:  -webkit-linear-gradient(top, #2A2A2A 0%, #4C4C4C 50%, #2A2A2A 100%);
}

.bluesplitgradient {
	background: -webkit-linear-gradient(top, #5CA3BF 0%, #4B93AE 50%, #3A829D 51%, #4B93AE 100%);
}

.bluedividergradient {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4B93AE), color-stop(98%,#3A829D), color-stop(100%,#18607B));
	padding: 5px;
}

And if not, what’s the best solution?

Also, on a quick glance, I wasn’t able to see a way to set padding to be so small via the options in Blocs.

I was able to surround the CSS in <STYLE> tags and add it in page settings as code, but because they are to be used in a global header, it only worked for the first page.

So instead, I added it at the project level as a .css file, and that does seem to work.

I understand I’m going against the philosophy of Blocs in that you’re not SUPPOSED to need to code, so is there a better way?

Thanks for any tips for this beginner!

2

I don’t know css, but I can see the word ‘gradient’, and if that’s what you’re after, then that’s doable in the class manager.
It sounds like you may be making life difficult for yourself.
If you could upload a link or something visual for what you’re after it may make life easier to understand for us non-coders.

3

Sorry to be unclear. In pure Blocs terms, here’s the rephrased question:

In the Class Manager → Class Editor → Background (5th button, looks like a gradient) → is it possible to set up a gradient with multiple steps?

… And OOPS, while rephrasing the question and trying it out in Blocs, I accidentally found the solution.

Solution: I didn’t notice the - / + button in the upper right corner of the Output gradient. Clicking on the “+” button lets you set up as many steps as you want, and each one looks like a circle. Dragging the circle sets the % and clicking it sets the color.

Solution found, yay!

3 Likes
4

Great you found a solution in the class builder.

Still you would be able to add plain CSS content to blocs in the code editor.

Cheers!