TUTORIAL VIDEO - Making Gradient Text

Here’s a quick tutorial on making gradient text in Blocs.

Download zip with the extra css file and colour sample used in the video.

Cheers / Johny


Great, Jakerlund!

1 Like

Awesome :slight_smile: Thank you!

1 Like

And so easy to follow thank you.

1 Like

This is a great tutorial!

Good news everyone, Blocs 2.4.1 will have everything in app to achieve this effect. In The custom Class editor there is a new background clip feature under the background colour well that you can be set to Text and you can also drop the text colour opacity to 0 and this will now input transparent into the text rule of the custom class. This means it will render in app.

For those who are confused as to why Im mentioning 2.4.1 before 2.4.0 is out its because 2.4.0 is imminent and I didn’t want to change the code base prior to its release. 2.4.1 will most likely drop next week.


I badly want this, good job @Norm! Excited to update my site with this built in feature :slight_smile:


I wasn’t aware it was even possible until @Jakerlund showed me the source code. It was super easy to implement the features into Blocs so was a no brainer.



Whohoo… :nerd:

This is great, from a question to a tutorial and ending up as a feature in Blocs so quickly.


@norm does it again. Blocs Rocks!

I know, I wish all features were this simple to implement. This was just one of those (rare) really easy ones :sunglasses:


I’m still on the fence as to whether custom breakpoints is a good thing for Blocs. I think Bootstrap 4 covers all the bases with the addition of the fourth breakpoint which Blocs will get in version 3.

I’ll defo be adding a way to code up your own additional breakpoints in app, but I’m not 100% sold on a visual solution that does a good enough job and is user friendly.

Meta Tags

Will all come - pretty sure:+1:

NO!!! Blocs automated breakpoints are perfect! no need for manual breakpoints. Adobe Muse used that approached and see what happens. FAIL! hahaha Please don’t add manual breakpoints it will ruin the essence of easy bootstrap builder. :frowning:

1 Like

@Bootsie Blocs uses Bootstrap, why do you need manual breakpoints? I think the visibility Toggle is a way better solution. :slight_smile:

I’m not talking about manual breakpoints.
But as we all know there’s a lack between the iPad and the mobile phone breakpoint.

1 Like

Yeah this is addressed in Bootstrap 4, there is a new breakpoint that fills that gap.

Bravo. :sunglasses:
So we have to wait for Blocs 3.0.

1 Like

It took me a while to understand what Norm is describing here, but it really is a much simpler way to make a text gradient. So I thought I’d provide instructions for others like me, who need step-by-step instructions:

  1. define the text for the gradient (eg, a text bloc or span)
  2. define a custom class (eg, textgrad)
  3. in the Background section of the Style settings choose Gradient from the Style dropdown to define a gradient behind the text
  4. choose Image & Color from the same Style dropdown and select Text from the Clip dropdown to assign the gradient to within the text instead
  5. in the Color well of the Typography setting make sure the opacity is 0%

The animated gif goes through the key steps (3-5):