Magic Background Gradient Patterns

How To:

Visit Gradient Magic

This great site can be found at

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:

.mygradient {
    /* put the background gradient pattern here */

Only thing left is applying the CSS class to a rectangle or even more interesting a group.

Your done :white_check_mark:


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: (38,7 KB)


Great resource