Magic Background Gradient Patterns

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 :white_check_mark:

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)

7 Likes

Great resource