Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/evankarageorgos/hue

A huge pack of 49 photorealistic gradients that you can use as content backdrops.
https://github.com/evankarageorgos/hue

Last synced: about 1 month ago
JSON representation

A huge pack of 49 photorealistic gradients that you can use as content backdrops.

Lists

README 

        
# Hue CSS



*A huge pack of 49 photorealistic gradients that you can use as content backdrops.*



[View demo »](http://evankarageorgos.github.io/hue/)



## Browser support

Some of the gradients use blending modes, support for which is limited in [some browsers](http://caniuse.com/#feat=css-backgroundblendmode).



## How to use

Download the stylesheet [`hue.css`](https://github.com/evankarageorgos/hue/blob/master/hue.css), add it to your project folder structure, then call it in the `` section of your document.



```

html

  

    

  

```



or you can also compile any of the individual classes, from the `partials` list folder with the SCSS versions.



Add to any element the class corresponding to the backdrop you want to add. You can select any of the available classes below:



* [`theBridge`](/partials/_thebridge.scss)

* [`deepFocus`](/partials/_deepfocus.scss)

* [`blueHour`](/partials/_bluehour.scss)

* [`darkAmber`](/partials/_darkamber.scss)

* [`prelude`](/partials/_prelude.scss)

* [`saltAndPepper`](/partials/_saltandpepper.scss)

* [`cashemere`](/partials/_cashemere.scss)

* [`wolverine`](/partials/_wolverine.scss)

* [`fullMoon`](/partials/_fullmoon.scss)

* [`flamingo`](/partials/_flamingo.scss)

* [`earlyMorning`](/partials/_earlymorning.scss)

* [`nearLight`](/partials/_nearlight.scss)

* [`mirror`](/partials/_mirror.scss)

* [`dementor`](/partials/_dementor.scss)

* [`underTheEarth`](/partials/_undertheearth.scss)

* [`backToAlaska`](/partials/_backtoalaska.scss)

* [`flash`](/partials/_flash.scss)

* [`tribute`](/partials/_tribute.scss)

* [`twinPeaks`](/partials/_twinpeaks.scss)

* [`youngForest`](/partials/_youngforest.scss)

* [`air`](/partials/_air.scss)

* [`tranquility`](/partials/_tranquility.scss)

* [`silverLake`](/partials/_silverlake.scss)

* [`amnesia`](/partials/_amnesia.scss)

* [`silverStone`](/partials/_silverstone.scss)

* [`greyConnection`](/partials/_greyconnection.scss)

* [`theCapsule`](/partials/_thecapsule.scss)

* [`hiddenGems`](/partials/_hiddengems.scss)

* [`nightSmoothie`](/partials/_nightsmoothie.scss)

* [`goldenLeaf`](/partials/_goldenleaf.scss)

* [`floatingDream`](/partials/_floatingdream.scss)

* [`escape`](/partials/_escape.scss)

* [`icarus`](/partials/_icarus.scss)

* [`flashlight`](/partials/_flashlight.scss)

* [`milkyWay`](/partials/_milkyway.scss)

* [`circular`](/partials/_circular.scss)

* [`autumn`](/partials/_autumn.scss)

* [`northKingdom`](/partials/_northkingdom.scss)

* [`jupiter`](/partials/_jupiter.scss)

* [`whiteNoise`](/partials/_whitenoise.scss)

* [`silverSurfer`](/partials/_silversurfer.scss)

* [`blackSands`](/partials/_blacksands.scss)

* [`greyHound`](/partials/_greyhound.scss)

* [`returnToAir`](/partials/_returntoair.scss)

* [`graphite`](/partials/_graphite.scss)

* [`unicorn`](/partials/_unicorn.scss)

* [`cosmos`](/partials/_cosmos.scss)

* [`ice`](/partials/_ice.scss)

* [`comet`](/partials/_comet.scss)



# License

Hue.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)



# Credit where credit is due

HUE CSS is based on the original [Sketch gradients](https://www.behance.net/gallery/30067997/Hue-Free-Promo-Backdrops-and-Gradients) by Vladimir Kudinov.



# Future

Future versions of this may also introduce a noise pattern overlay, as in the original Sketch gradients.