【WEBデザイン】CSSで作る綺麗なグラデーションアイデア25選!

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(251, 213, 251, 1), rgba(149, 233, 243, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(134, 201, 255, 1), rgba(207, 253, 157, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(210, 190, 153, 1), rgba(188, 237, 255, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(159, 205, 255, 1), rgba(250, 233, 246, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(232, 45, 166, 1), rgba(161, 223, 255, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(223, 232, 45, 1), rgba(161, 223, 255, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(232, 45, 179, 1), rgba(245, 255, 161, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(255, 132, 220, 1), rgba(239, 181, 82, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(255, 132, 132, 1), rgba(239, 181, 82, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(248, 15, 15, 1), rgba(207, 63, 245, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(255, 190, 190, 1), rgba(255, 220, 159, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(210, 153, 194, 1), rgba(255, 247, 194, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(179, 243, 194, 1), rgba(255, 247, 194, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(198, 255, 202, 1), rgba(255, 194, 246, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(103, 74, 255, 1), rgba(255, 160, 71, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(255, 243, 175, 1), rgba(35, 117, 163, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(255, 185, 175, 1), rgba(114, 195, 241, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(164, 198, 198, 1), rgba(188, 146, 166, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(244, 143, 143, 1), rgba(180, 97, 136, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(228, 244, 143, 1), rgba(180, 97, 97, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(143, 152, 244, 1), rgba(205, 44, 44, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(143, 244, 155, 1), rgba(159, 85, 217, 1));
}

.gradation{
width:100%;
height:200px;
background-image: linear-gradient(90deg, rgba(244, 143, 144, 1), rgba(169, 217, 85, 1));
}