Gradients can be used in a variety of ways, take for example the use of a gradient encase this block of text. The gradient is set to 220px height, with a bottom space (margin) of -233px.
This allows the text block to be set (visually) on top of the grade, when if fact all its doing is moving up, based on the negative space applied to the HRticulate grade module.
A centered speechbox has been added for vitality, and to bring awareness to this text.
If you can visualize it, you can make it. Be adventurous with the way this may be employed.
Duplicate modules on top of each other, place them side-by-side. From mild to the extreme, anything is possible. This section is generated by using the top section gray, as a base, duplicated twice, recolored, then stacked.
All in all a nice effect.
Under normal circumstances, a lot of css and images are required to make something similar.
Not to mention the time savings it would take for generation and experimenting to get the values correct!
Line fill : Transparent
Font : Arial Black
Font Color : #000000
Font Size : 28
Aligned : Left
Background : rgba(175,226,237,0.62)
Extra Bottom Spacing : 50
Right Border : 8
Right Border Color : #000000
Corner Radius : 4