csstest：CSSライブラリ「hue.css」を使って、背景に簡単できれいなグラデーション

外国企業の商品紹介ページの背景に使われているようなきれいなモノクロ調のグラデーションをCSSライブラリー「hue.css」を使うことで簡単に実装できます。使い方は、使いたい要素（bodyのbackgroundなど）にclass名を付けるだけです。CSSの指定だけなので、49種類の背景グラデーションから一つだけ取り出し、インナーに書き出して使うことも可能です。

サンプル内に表示のテキストがそのグラデーションのclass名です。

サンプルのcssソース一例（クラス名「theBridge」）

.theBridge { background: -webkit-linear-gradient(223deg, #EBEBEB 0%, #C5C6C8 100%), -webkit-linear-gradient(295deg, rgba(255, 255, 255, 0.5) 5%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(227deg, #EBEBEB 0%, #C5C6C8 100%), linear-gradient(155deg, rgba(255, 255, 255, 0.5) 5%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: multiply; }

サンプル

theBridge

deepFocus

blueHour

darkAmber

prelude

saltAndPepper

cashemere

wolverine

fullMoon

flamingo

earlyMorning

nearLight

mirror

dementor

underTheEarth

backToAlaska

flash

unicorn

tribute

twinPeaks

youngForest

air

tranquility

silverLake

amnesia

silverStone

greyConnection

theCapsule

hiddenGems

nightSmoothie

goldenLeaf

floatingDream

escape

icarus

flashlight

milkyWay

circular

autumn

northKingdom

jupiter

whiteNoise

silverSurfer

blackSands

greyHound

returnToAir

graphite

cosmos

ice

comet