CSSのデバッグやスキルアップに役立つ！グラデーションや背景など複雑に記述されたCSSを読みやすくし、デバッグ・編集できる無料ツール -bg.layers

Post on:2026年3月31日

sponsorsr

CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。

下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただけでデバッグするのはかなり難しいと思います。そんな複雑なCSSでも簡単にデバッグ・編集できる無料ツールを紹介します。

複雑に記述されたCSSを読みやすくし、デバッグ・編集できる無料ツール -bg.layers

bg.layersは、CSSで実装された背景レイヤーをデバッグ・編集するためのオンラインツールです。backgroundをはじめ、background-image, background-color, background-positionなど、background-*プロパティの挙動を確認し、各レイヤーを確認したり、レイヤーの順番を変更・非表示にしたり、編集したCSSをコピーすることもできます。

bg.layers

bg.layersでどんなことができるか見てみましょう。
下記のようにキューブが重なっているCSSは、たまに見かけると思います。

CSSで実装されたキューブが重なった背景

このキューブを実装するCSSは、下記の通りです。

div {
  --s: 50px;
  --c1: #f1f7ff;
  --c2: #dde9fa;
  --c3: #c9dcf4;

  background:
    conic-gradient(             at calc(250%/3) calc(100%/3), var(--c3) 0 120deg, #0000 0),
    conic-gradient(from -120deg at calc( 50%/3) calc(100%/3), var(--c2) 0 120deg, #0000 0),
    conic-gradient(from  120deg at calc(100%/3) calc(250%/3), var(--c1) 0 120deg, #0000 0),
    conic-gradient(from  120deg at calc(200%/3) calc(250%/3), var(--c1) 0 120deg, #0000 0),
    conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2)  60deg, var(--c1) 0 120deg, #0000 0),
    conic-gradient(from   60deg at calc(200%/3) 50%,var(--c1)  60deg, var(--c3) 0 120deg, #0000 0),
    conic-gradient(from  -60deg at 50% calc(100%/3),var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0);
  background-size: calc(var(--s)*sqrt(3)) var(--s);
}

div {

--s: 50px;

--c1: #f1f7ff;

--c2: #dde9fa;

--c3: #c9dcf4;

background:

conic-gradient( at calc(250%/3) calc(100%/3), var(--c3) 0 120deg, #0000 0),

conic-gradient(from -120deg at calc( 50%/3) calc(100%/3), var(--c2) 0 120deg, #0000 0),

conic-gradient(from 120deg at calc(100%/3) calc(250%/3), var(--c1) 0 120deg, #0000 0),

conic-gradient(from 120deg at calc(200%/3) calc(250%/3), var(--c1) 0 120deg, #0000 0),

conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2) 60deg, var(--c1) 0 120deg, #0000 0),

conic-gradient(from 60deg at calc(200%/3) 50%,var(--c1) 60deg, var(--c3) 0 120deg, #0000 0),

conic-gradient(from -60deg at 50% calc(100%/3),var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0);

background-size: calc(var(--s)*sqrt(3)) var(--s);

}

CSSを見ただけでデバッグしたり、調整するのはかなり難しいと思います。

bg.layersを使用すると、7枚のレイヤーで構成されていることが分かります。それぞれのレイヤーでbackground-*がどのようになっているかを確認できます。また、各レイヤーの右上（目）をクリックすると、表示・非表示を切り替えることができます。

複雑なCSSをレイヤー化

一番上のレイヤーを非表示

一番上だとあまり違いが感じられないかもしれないので、今度は一番下のレイヤーを非表示にしてみました。

一番下のレイヤーを非表示

各レイヤーに分割することで、確認・編集が簡単になります。もちろん、CSSを直接編集できるので、変数の--s: 50px;を--s: 100px;<に変更すると、ブロックのサイズが変更されます。

ブロックのサイズを変更

CSSの背景と言えば、複数のグラデーションを重ねた背景を実装することがあると思います。

CSSで実装されたグラデーションの背景

このグラデーションを実装するCSSは、下記の通りです。

div {
  background-color: hsla(65, 60%, 97%, 1);
  background-image:
    radial-gradient(circle at 92% 93%, hsla(190, 56%, 91%, 0.53) 11%, transparent 79%),
    radial-gradient(circle at 24% 86%, hsla(13, 52%, 90%, 1) 16%, transparent 83%),
    radial-gradient(circle at 11% 94%, hsla(43, 55%, 90%, 1) 16%, transparent 51%),
    radial-gradient(circle at 36% 38%, hsla(81, 82%, 98%, 1) 3%, transparent 59%),
    radial-gradient(circle at 44% 9%, hsla(252, 61%, 51%, 0.48) 13%, transparent 83%);
}

div {

background-color: hsla(65, 60%, 97%, 1);

background-image:

radial-gradient(circle at 92% 93%, hsla(190, 56%, 91%, 0.53) 11%, transparent 79%),

radial-gradient(circle at 24% 86%, hsla(13, 52%, 90%, 1) 16%, transparent 83%),

radial-gradient(circle at 11% 94%, hsla(43, 55%, 90%, 1) 16%, transparent 51%),

radial-gradient(circle at 36% 38%, hsla(81, 82%, 98%, 1) 3%, transparent 59%),

radial-gradient(circle at 44% 9%, hsla(252, 61%, 51%, 0.48) 13%, transparent 83%);

}

このグラデーションは5つのレイヤーで構成されており、各レイヤーでどのようなグラデーションが設定されているのか、さらに順番を変えるとどうなるのか、もちろん各レイヤーを編集することもできます。

レイヤーの順番を変更

また、ジグザグの背景を実装するCSSも見かけると思います。

CSSで実装されたジグザグの背景

このジグザグを実装するCSSは、下記の通りです。

div {
  background-image:
    linear-gradient(135deg, #f2c8be 25%, transparent 25%),
    linear-gradient(225deg, #f2c8be 25%, transparent 25%),
    linear-gradient(45deg, #f2c8be 25%, transparent 25%),
    linear-gradient(315deg, #f2c8be 25%, #f7e7de 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}