<div class="container">
<div class="gradient_01"></div>
<div class="gradient_02"></div>
<div class="gradient_03"></div>
</div>
.container {
width:100%;
display:flex;
font-weight:bold;
text-transform:uppercase;
color:brown;
font-size:11px;
}
.gradient_01, .gradient_02, .gradient_03, .gradient_04 {
display:flex;
justify-content:center;
align-items:center;
width:25%;
height:150px;
margin:0 10px
}
.gradient_01 {
background:#ffcc00;
background-image:
radial-gradient(
circle at top left,
#ffff00,
#ffa500,
#ff0000,
#4b0082,
#000000
);
}
.gradient_02 {
background:#ffcc00;
background-image:
radial-gradient(
circle,
#000000 13%,
#ffa500 14%,
#ffff00 21%,
#008000 28%,
#ffffff 35%,
#cccccc 65%,
#ee82ee 70%
);
}
.gradient_03 {
background:#ffcc00;
background-image:
radial-gradient(
circle at bottom center,
black 49%,
grey 50%,
black 75%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.