background-imageで背景グラデーション

2022年1月19日

background-imageで、グラデーションができます。
background-image: グラデーションの種類(色 位置, 色 位置, 色 位置, 色 位置 …);

指定できるグラデーション

• linear-gradient() ≪ボーダー≫
• repeating-linear-gradient() ≪ボーダー 繰り返し≫
• radial-gradient() ≪円状≫
• repeating-radial-gradient() ≪円状 繰り返し≫
• conic-gradient() ≪放射≫
• repeating-conic-gradient() ≪放射 繰り返し≫

ボーダー１. linear-gradient()

ｈｔｍｌ

<div class=”gradation1″>
</div>

ＣＳＳ

.gradation1 {
width: 80%;
height: 250px;
margin: auto;
background-image: linear-gradient(#000 0%,#0f0 26%,#ff0 50%,#f33 100%);
}

ボーダー２. repeating-linear-gradient()

ｈｔｍｌ

<div class=”gradation2″>
</div>

ＣＳＳ

.gradation2 {
width: 80%;
height: 250px;
margin: auto;
background-image: repeating-linear-gradient(#000 0%,#0f0 13%,#ff0 25%,#f33 50%);
}

円状１. radial-gradient()

ｈｔｍｌ

<div class=”gradation3″>
</div>

ＣＳＳ

.gradation3 {
width: 80%;
height: 250px;
margin: auto;
background-image: linear-gradient(#000 0%,#0f0 26%,#ff0 50%,#f33 100%);
}

円状２. repeating-radial-gradient()

ｈｔｍｌ

<div class=”gradation4″>
</div>

ＣＳＳ

.gradation4 {
width: 80%;
height: 250px;
margin: auto;
background-image: repeating-linear-gradient(#000 0%,#0f0 13%,#ff0 25%,#f33 50%);
}

放射１. linear-conic()

ｈｔｍｌ

<div class=”gradation5″>
</div>

ＣＳＳ

.gradation5 {
width: 80%;
height: 250px;
margin: auto;
background-image: linear-gradient(#000 0%,#0f0 26%,#ff0 50%,#f33 100%);
}

放射２. repeating-conic-gradient()

ｈｔｍｌ

<div class=”gradation6″>
</div>

ＣＳＳ

.gradation6 {
width: 80%;
height: 250px;
margin: auto;
background-image: repeating-linear-gradient(#000 0%,#0f0 13%,#ff0 25%,#f33 50%);
}

こんなことも

ｈｔｍｌ

<div class=”gradation7″>
</div>

ＣＳＳ

.gradation7 {
width: 80%;
height: 250px;
margin: auto;
background-image: repeating-linear-gradient(#000 0%,#0f0 13%,#ff0 25%,#f33 50%);
}