CSS BACKGROUND / LAYER EDITOR

CSS Gradient Layer Studio.

24プリセットから、グラデーションを重ねてWebの背景を作る。

GRADIENT WORKSPACE

色の位置と重なりを編集する

24のプリセットを見る ↓
レイヤー ↓PURE CSS

STUDIO / COLOR EXPLORATIONS

Make room for color.

グラデーションを重ねて作る、Webの背景。

EXPLORE THE COLLECTION

THE COLOR SERIES

A new perspective.

DESIGNED WITH CSS GRADIENTS

比率・文字・編集ポイント・市松模様は確認用です。コピーするCSSには背景だけを含みます。

SELECTED LAYER

選択中のレイヤー

色と透明度

始点 0%終点 100%

位置順にCSSへ出力します。同じ位置に2色を置くと、境目がはっきり切り替わります。

READY TO USE

この背景をCSSで使う

編集画面と同じグラデーションを出力します。非表示のレイヤーは含みません。

24 READY-MADE BACKGROUNDS

使いたい配色から選ぶ

プリセットを選ぶと、レイヤー・位置・配色をまとめて適用します。

24 presets

TRY IT IN A LAYOUT

カードやバナーの背景で確認する

現在の設定を使っています。文字とレイアウトは、コピーする背景CSSに含みません。

THE GRADIENT COLLECTION

Designed to stand out.

COLOR STUDY / CSS ONLY

A BACKGROUND FOR YOUR NEXT IDEA

Start with a little color.

色の位置を変えて、レイアウトに合う背景へ。

HOW IT WORKS

複数のグラデーションを、1つの背景へ

最初に書いた背景が手前

background-imageへカンマ区切りで指定します。リストの上から手前に重なり、background-colorはすべての画像より奥に表示されます。

透明度で、下の色を見せる

色ごとの透明度とレイヤーの不透明度を掛け合わせ、各色のアルファ値へ反映します。要素全体のopacityは使わないため、文字は薄くなりません。

背景の描画にJavaScriptは不要

編集操作にはJavaScriptを使いますが、出力した背景はCSSだけで表示できます。メッシュ風の背景は、複数の放射グラデーションを重ねた表現です。

サイズによる見え方：位置・広がり・色の区切りは%で指定します。要素の縦横比が変わると、同じCSSでも色の広がり方が変わります。実際の配置先でも確認してください。

色の補間：CSSにin srgbを指定し、sRGBで補間します。反射や金属のプリセットも、明暗を配置した色の表現であり、照明を計算する3D素材ではありません。

保存について：CSSはコピー、HTMLサンプルはファイルで保存できます。HTMLには現在の背景とシンプルな見出しを含み、編集機能や外部ライブラリは含みません。

参考：linear-gradient ↗radial-gradient ↗conic-gradient ↗背景の重なり順 ↗