How To:
Visit Gradient Magic
This great site can be found at https://www.gradientmagic.com/browse
Select background gradient pattern
Chose from the vast collection of background gradient patterns and click on Copy CSS ① on one of them (CSS rule should now be in your clipboard) or use the Edit ② button before that (see below).
Editing the CSS before clicking Copy CSS
After going to the optional edit screen you can: Change the colors ③ or rotate the pattern ④ and then finally Copy CSS ⑤ (CSS rule should now be in your clipboard)
Apply background gradient pattern in Hype
Add a style section to your HTML Head and create a selector and name it:
<style>
.mygradient {
/* put the background gradient pattern here */
}
</style>
Only thing left is applying the CSS class to a rectangle or even more interesting a group.
Your done
Attention:
If you don't want to disable protect from external styles (in the document panel) you will need to add a !important
before the final semicolon on each gradient. See example below.
Example file:
backgroundGradientPattern.hype.zip (38,7 KB)