January 2024
01/01/2024
Solution:
<div></div>
<h1></h1>
<style>
body {
background: #14313e;
}
div {
width: 150px;
height: 135px;
background: repeating-linear-gradient(
#bd3f4c 20px,
#f16348 20px,
#f16348 40px,
#bd3f4c 40px,
#bd3f4c 60px
);
margin: 90 auto;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
h1 {
width: 30px;
height: 30px;
border-radius: 50%;
background: #f16348;
margin: -240 auto;
position: relative;
}
</style>
Minified:
<p><h1><style>&{background:#14313E}p{width:150;height:135;background:repeating-linear-gradient(#BD3F4C 20px,#F16348 0 40px,#BD3F4C 0 60px);margin:90 117;clip-path:polygon(50%0,100%100%,0 100%)}h1{width:30;height:30;border-radius:50%;background:#F16348;margin:-240 177;position:relative
02/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<style>
body {
background: #645e00;
color: FFF579;
}
div {
width: 120px;
height: 120px;
background: #fff579;
margin: 90 auto;
border-radius: 20px;
}
h1 {
width: 20px;
height: 60px;
background: #fff579;
border-radius: 10px;
margin: -180 92;
box-shadow: 180px 0;
}
[a] {
rotate: 90deg;
margin: 30 182;
}
</style>
Minified:
<body bgcolor=645E00 text=FFF579><p><h1><h1 a><style>p{width:120;height:120;background:#FFF579;margin:90 132;border-radius:20px}h1{width:20;height:60;background:#FFF579;border-radius:10px;margin:-180 92;box-shadow:60vh 0}[a]{rotate:90deg;margin:30 182
03/01/2024
Solution:
<div></div>
<h1></h1>
<style>
body {
background: #92278f;
color: #fff579;
}
div {
width: 30px;
height: 150px;
background: #fff579;
margin: 75 87;
box-shadow: 60px 0, 120px 0, 180px 0;
}
h1 {
width: 30px;
height: 30px;
background: #fff579;
margin: -135 117;
box-shadow: 60px -30px, 120px -60px;
}
</style>
Minified:
<body bgcolor=92278F text=FFF579><p><h1><style>p{width:30;height:150;background:#FFF579;margin:75 87;box-shadow:60px 0,30vw 0,60vh 0}h1{width:30;height:30;background:#FFF579;margin:-135 117;box-shadow:60px -30px,30vw -60px
04/01/2024
Solution:
<div></div>
<h1></h1>
<style>
body {
background: #7ea26f;
color: #7ea26f;
}
div {
width: 160px;
height: 160px;
background: #204f23;
margin: 70 112;
}
h1 {
width: 20px;
height: 20px;
background: #7ea26f;
margin: -160 auto;
box-shadow: 70px 0, -70px 0, -65px -35px 0 15px, 65px -35px 0 15px,
-65px 35px 0 15px, 65px 35px 0 15px;
}
</style>
Minified:
<body bgcolor=7EA26F text=7EA26F><p><h1><style>p{width:160;height:160;background:#204F23;margin:70 112}h1{width:20;height:20;background:#7EA26F;margin:-160 182;box-shadow:74q 0,-74q 0, -69q -37q 0 16q,69q -37q 0 16q,-69q 37q 0 16q,69q 37q 0 16q
05/01/2024
Solution:
<div></div>
<h1></h1>
<style>
* {
background: #302954;
}
div {
width: 260px;
height: 120px;
background: #fdddce;
margin: 90 auto;
border-radius: 60px;
}
h1 {
width: 120px;
height: 120px;
margin: -210 auto;
rotate: 45deg;
}
</style>
Minified:
<p><h1><style>*{background:#302954}p{width:260;height:120;background:#FDDDCE;margin:90 62;border-radius:60px}h1{width:120;height:120;margin:-210 132;rotate:45deg
06/01/2024
Solution:
<div></div>
<div a></div>
<div b></div>
<style>
body {
background: #009247;
}
div {
width: 160px;
height: 140px;
background: #f0f8f1;
margin: 80 72;
border-radius: 70px 0;
}
[a] {
background: #009247;
height: 180px;
margin: -235 132;
border-radius: 81px 0;
}
[b] {
margin: 70 152;
}
</style>
Minified:
<p><p a><p b><style>&{background:#009247}p{width:160;height:140;background:#F0F8F1;margin:80 72;border-radius:70px 0}[a]{background:#009247;height:180;margin:-235 132;border-radius:81px 0}[b]{margin: 70 152
07/01/2024
Solution:
<div></div>
<style>
body {
background: #f89f65;
}
div {
width: 180px;
height: 175px;
background: repeating-linear-gradient(
90deg,
#5e0000 20px,
#f89f65 20px,
#f89f65 40px,
#5e0000 40px,
#5e0000 60px
);
margin: 60 102;
clip-path: polygon(0 0, 100% 54px, 100% 174px, 0 120px);
}
</style>
Minified:
<body bgcolor=F89F65><p><style>p{width:180;height:175;background:repeating-linear-gradient(90deg,#5E0000 20px,#F89F65 0 40px,#5E0000 0 60px);margin:60 102;clip-path:polygon(0 0,100%57q,100%184q,0 30vw
08/01/2024
Solution:
<div></div>
<h1></h1>
<style>
* {
background: #0c2428;
color: #0c2428;
}
div {
width: 50px;
height: 50px;
background: #d9d9d9;
margin: 75 117;
color: #d9d9d9;
box-shadow: 100px 0, 0 100px, 100px 100px, 50px 50px 0 25px;
}
h1 {
width: 20px;
height: 20px;
border-radius: 50%;
margin: -110 132;
box-shadow: 100px 0, 0 100px, 100px 100px, 50px 50px 0 10px;
}
</style>
Minified:
<p><h1><style>*{background:#0C2428;color:0C2428}p{width:50;height:50;background:#D9D9D9;margin:75 117;color:D9D9D9;box-shadow:25vw 0,0 25vw,25vw 25vw,53q 53q 0 25px}h1{width:20;height:20;border-radius:50%;margin:-110 132;box-shadow:25vw 0,0 25vw,25vw 25vw,53q 53q 0 10px
09/01/2024
Solution:
<div></div>
<div a></div>
<style>
body {
background: #aea530;
}
div {
width: 75px;
height: 100px;
background: #fff9ae;
transform: skewY(53deg);
margin: 100 192;
}
[a] {
scale: 1-1;
margin: -200 117;
}
</style>
Minified:
<body bgcolor=AEA530><p><p a><style>p{width:75;height:100;background:#FFF9AE;transform:skewY(53deg);margin:100 192}[a]{scale:1-1;margin:-200 117
10/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<style>
body {
background: #6f2450;
}
div {
width: 60px;
height: 127px;
background: #fcdfeb;
margin: 113 122;
box-shadow: 80px 0 #fcdfeb;
}
h1 {
width: 60px;
height: 60px;
background: #fcdfeb;
margin: -293 122;
border-radius: 0 0 60px 0;
outline: solid 20px #6f2450;
}
[a] {
margin: 233 202;
scale: -1 1;
}
</style>
Minified:
<p><h1><h1 a><style>*{background:#FCDFEB;color:6F2450}p{width:60;height:127;margin:113 122;box-shadow:5em 0#FCDFEB,0 0 0 3in}h1{width:60;height:60;margin:-293 122;border-radius:0 0 66q 0;outline:solid 22q}[a]{margin:233 202;scale:-1 1
11/01/2024
Solution:
<div></div>
<div a></div>
<style>
body {
background: #92278f;
}
div {
width: 230px;
height: 130px;
margin: 65 auto;
border: solid 20px #fff579;
border-radius: 60px;
}
[a] {
width: 80px;
height: 80px;
border-radius: 50%;
margin: -185 auto;
}
</style>
Minified:
<p><p a><style>*{background:#92278F}p{width:230;height:130;margin:65 57;border:solid 20px#FFF579;border-radius:63q}[a]{width:80;height:80;border-radius:50%;margin:-185 132
12/01/2024
Solution:
<div></div>
<div a></div>
<div b></div>
<style>
body {
background: #762b2b;
}
div {
width: 104px;
height: 104px;
background: radial-gradient(circle at 50% -9px, #fff685 52px, #762b2b 52px);
margin: 128.5 13;
border-radius: 50%;
}
[a] {
margin: -202 auto;
scale: 2;
}
[b] {
margin: 67 267.5;
}
</style>
Minified:
<p><p a><p b><style>*{background:#762B2B}p{width:104;height:104;background:radial-gradient(circle at 50%-9px,#FFF685 52px,#762B2B 0);margin:128 13;border-radius:50%}[a]{margin:-202 140;scale:2}[b]{margin:67 267
13/01/2024
Solution:
<h1></h1>
<p></p>
<p a></p>
<p b></p>
<p c></p>
<style>
body {
background: #7bafde;
}
h1 {
width: 90px;
height: 40px;
background: #6867d4;
margin: 130 92;
box-shadow: 110px 0 #6867d4;
}
p {
width: 90px;
height: 60px;
background: #000039;
position: fixed;
top: 34;
left: 100;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
[a] {
top: 174;
scale: 1 -1;
}
[b] {
left: 210;
scale: -1 1;
}
[c] {
top: 174;
left: 210;
scale: -1-1;
}
</style>
Minified:
<h1><p><p a><p b><p c><style>h1{width:90;height:40;background:#6867D4;margin:130 92;box-shadow:116q 0#6867D4,0 0 0 3in#7BAFDE}p{width:90;height:60;background:#000039;position:fixed;top:18;left:100;clip-path:polygon(0 0,100%100%,0 100%)}[a]{top:158;scale:1-1}[b]{left:210;scale:-1 1}[c]{top:158;left:210;scale:-1-1
14/01/2024
Solution:
<div a></div>
<div b></div>
<div c></div>
<div d></div>
<div e></div>
<style>
body {
background: #7c402e;
}
div {
width: 50px;
height: 50px;
background: #f1e5df;
margin: 75 42 -25;
}
[a] {
border-radius: 50%;
}
[b] {
width: 100px;
}
[c] {
height: 100px;
margin: -150 92;
border-radius: 0 50px 50px 0;
}
[d] {
width: 100px;
height: 150px;
margin: 50 167;
border-radius: 50px;
}
[e] {
height: 150px;
margin: -200 292;
border-radius: 50px;
}
</style>
Minified:
<body bgcolor=7C402E><p a><p b><p c><p d><p d e><style>p{width:50;height:50;background:#F1E5DF;margin:75 42-25}[a]{border-radius:50%}[b]{width:100}[c]{height:100;margin:-150 92;border-radius:0 5em 5em 0}[d]{width:100;height:150;margin:50 167;border-radius:5em}[e]{width:50;margin:-200 292
15/01/2024
Solution:
<div></div>
<style>
html {
border: solid 40px #000000;
}
div {
width: 40px;
height: 40px;
background: #000000;
margin: 90 auto;
box-shadow: -180px 0 #ffffff, 180px 0 #ffffff, 0 130px #ffffff, 0 -130px#FFFFFF;
}
</style>
Minified:
<p></p><style>html{border:solid 40px}p{width:40;height:40;background:#000;color:fff;margin:90 132;box-shadow:-60vh 0,60vh 0,0 130px, 0 -130px
16/01/2024
Solution:
<div></div>
<p></p>
<p a></p>
<style>
body {
background: #002a6b;
}
div {
width: 180px;
height: 90px;
background: #c7e7fb;
margin: 75 auto;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
p {
width: 85px;
height: 85px;
background: linear-gradient(-45deg, #c7e7fb 50%, #5cc4f4 50%);
rotate: 45deg;
margin: -118 90;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
}
[a] {
rotate: -45deg;
scale: -1 1;
margin: 33 210;
}
</style>
Minified:
<p><h1><h1 a><style>&{background:#002A6B}p{width:180;height:90;background:#C7E7FB;margin:75 102;clip-path:polygon(0 0,100%0,50%100%)}h1{width:85;height:85;background:linear-gradient(-45deg,#C7E7FB 50%,#5CC4F4 0);rotate:45deg;margin:-118 90;clip-path:polygon(0 0,100%0,100%100%,50%50%,0%100%)}[a]{rotate:-45deg;scale:-1 1;margin:33 210
17/01/2024
Solution:
<div></div>
<div a></div>
<div c></div>
<style>
body {
background: #d8b788;
}
div {
width: 120px;
height: 180px;
background: linear-gradient(
#684c3b 20px,
#d8b788 20px,
#d8b788 40px,
#684c3b 40px
);
margin: 70 auto;
border-radius: 10px;
}
[a] {
width: 20px;
height: 80px;
background: #d8b788;
margin: -180 162;
box-shadow: 40px 0 #d8b788;
}
[c] {
background: #684c3b;
width: 40px;
height: 40px;
margin: 10 auto;
}
</style>
Minified:
<p><p a><p c><style>*{background:#D8B788}p{width:120;height:180;background:linear-gradient(#684C3B 21q,#D8B788 0 43q,#684C3B 0);margin:70 132;border-radius:10q}[a]{width:20;height:80;background:#D8B788;margin:-180 162;box-shadow:42q 0#D8B788}[c]{background:#684C3B;width:40;height:40;margin:10 172
18/01/2024
Solution:
<div></div>
<div a></div>
<h1></h1>
<style>
body {
background: #f7bed9;
}
div {
width: 90px;
height: 60px;
background: #ec0076;
margin: 98 172;
border-radius: 10px;
}
[a] {
margin: -178 142;
background: #f069ab;
border-radius: 0 10px 10px 0;
}
h1 {
width: 20px;
height: 180px;
background: #8b0051;
border-radius: 10px;
margin: 100 122;
}
</style>
Minified:
<p><p a><h1><style>&{background:#F7BED9}p{width:90;height:60;background:#EC0076;margin:98 172;border-radius:10px}[a]{margin:-178 142;background:#F069AB;border-radius:0 10px 10px 0}h1{width:20;height:180;background:#8B0051;border-radius:10px;margin:100 122
19/01/2024
Solution:
<div></div>
<h1></h1>
<h2></h2>
<style>
body {
background: #551d70;
}
div {
width: 80px;
height: 140px;
background: linear-gradient(#7e6bb7 90px, #e6e7e8 90px);
margin: 90 auto;
border-radius: 0 0 40px 40px;
}
h1 {
width: 100px;
height: 20px;
background: #e6e7e8;
border-radius: 10px;
margin: -250 auto;
}
h2 {
width: 10px;
height: 10px;
background: #e6e7e8;
border-radius: 50%;
margin: 310 182;
box-shadow: -15px -25px 0 5px #e6e7e8;
}
</style>
Minified:
<p><h1><h1 a><style>*{background:#551D70}p{width:80;height:140;background:linear-gradient(#7E6BB7 95q,#E6E7E8 0);margin:90 152;border-radius:0 0 5ch 5ch}h1{width:100;height:20;background:#E6E7E8;border-radius:12q;margin:-250 142}[a]{width:10;height:10;margin:310 182;box-shadow:-16q -26q 0 5q#E6E7E8
20/01/2024
Solution:
<div></div>
<h1></h1>
<div a></div>
<style>
body {
background: #602820;
}
div {
width: 180px;
height: 50px;
background: #f16b4a;
margin: 145 auto;
border-radius: 15px;
}
h1 {
width: 150px;
height: 160px;
background: #fac2a8;
margin: -270 auto -230;
border-radius: 75px 75px 20px 20px;
}
[a] {
width: 80px;
}
</style>
Minified:
<h1><h2><h1 a><style>*{background:#602820}h1{width:180;height:50;background:#F16B4A;margin:145 auto;border-radius:16q}h2{width:150;height:160;background:#FAC2A8;margin:-270 117-230;border-radius:80q 80q 21q 21q}[a]{width:80
21/01/2024
Solution:
<div></div>
<h1></h1>
<style>
body {
background: #223e1f;
}
div {
width: 250px;
height: 150px;
background: linear-gradient(#0a9947 120px, #feff27 120px);
margin: 75 auto;
border-radius: 10px;
}
h1 {
width: 20px;
height: 60px;
background: #feff27;
border-radius: 0 0 10px 10px;
margin: -225 92;
box-shadow: 30px 0 #feff27, 60px 0 #feff27, 90px 0 #feff27, 90px 20px
#feff27, 120px 0 #feff27, 150px 0 #feff27, 180px 0 #feff27;
}
</style>
Minified:
<body bgcolor=223E1F text=FEFF27><p><h1><style>p{width:250;height:150;background:linear-gradient(#0A9947 80%,#FEFF27 0);margin:75 67;border-radius:11q}h1{width:20;height:60;background:#FEFF27;border-radius:0 0 10q 10q;margin:-225 92;box-shadow:32q 0,64q 0,95q 0,95q 21q,40vh 0,50vh 0,60vh 0
22/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<h1 b></h1>
<style>
body {
background: #024817;
}
div {
width: 150px;
height: 150px;
background: #088540;
border-radius: 50%;
margin: 50 auto;
}
h1 {
width: 20px;
height: 70px;
background: #83cf9d;
margin: -139.5 199.5;
border-radius: 10px;
rotate: 45deg;
}
[a] {
rotate: -45deg;
margin: 69.5 164.5;
}
[b] {
rotate: 0deg;
height: 220px;
margin: -155 auto;
}
</style>
Minified:
<p><h1><h1 a><h1 b><style>&{background:#024817}p{width:150;height:150;background:#088540;border-radius:50%;margin:50 117}h1{width:20;height:70;background:#83CF9D;margin:-140 200;border-radius:20q;rotate:45deg}[a]{rotate:-45deg;margin:70 164}[b]{rotate:none;height:220;margin:-155 182
23/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<style>
body {
background: radial-gradient(
circle at 200px 135px,
#a94ea4 60px,
#401653 50px
);
}
div {
width: 120px;
height: 150px;
background: #a94ea4;
margin: 75 auto;
clip-path: polygon(0 0, 50% 59px, 100% 0, 100% 100px, 50% 100%, 0 100px);
}
h1 {
width: 60px;
height: 10px;
background: #f7bed9;
margin: -185 auto 205px;
position: relative;
border-radius: 5px;
}
[a] {
rotate: 90deg;
width: 70px;
}
</style>
Minified:
<p><h1><h1 a><style>&{background:radial-gradient(1q at 50%143q,#A94EA4 60px,#401653 0)}p{width:120;height:150;background:#A94EA4;margin:75 132;clip-path:polygon(0%0,50%63q,100%0,100%25vw,50%100%,0%25vw)}h1{width:60;height:10;background:#F7BED9;margin:-185 auto 205;position:sticky;border-radius:5q}[a]{rotate:90deg;width:70
24/01/2024
Solution:
<div></div>
<div a></div>
<h1></h1>
<style>
body {
background: #9f002f;
}
div {
width: 100px;
height: 160px;
background: radial-gradient(circle at 60% 50%, #f7bed9 20px, #ed3b9a 20px);
margin: 70 67;
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
[a] {
margin: -230 242;
scale: 0.5;
background: #f7bed9;
}
h1 {
width: 160px;
height: 10px;
background: #f7bed9;
margin: 145 auto;
}
</style>
Minified:
<body bgcolor=9F002F><p><p a><h1><style>p{width:100;height:160;background:radial-gradient(1q at 60%50%,#F7BED9 20px,#ED3B9A 0);margin: 70 67;clip-path:polygon(100%0,100%100%,0%50%)}[a]{margin:-230 242;scale:.5;background:#F7BED9}h1{width:160;height:10;background:#F7BED9;margin:145 112
25/01/2024
Solution:
<div></div>
<style>
* {
background: #999943;
color: #f0ed38;
}
div {
width: 200px;
height: 100px;
background: #f0ed38;
margin: 60 auto;
border-bottom: solid 20px #999943;
border-radius: 100px 100px 0 0;
box-shadow: 0 20px, 0 40px #999943, 0 60px;
}
</style>
Minified:
<p
style="width:200;height:100;background:#F0ED38;margin:60+92;color:999943;border-bottom:solid+20px;border-radius:25vw+25vw+0+0;box-shadow:0+21q#F0ED38,0+40px,0+60px#F0ED38,0+0+0+3in"
></p>
26/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<style>
body {
background: #0d2328;
}
div {
width: 80px;
height: 240px;
margin: 90 132;
border: solid 20px #357597;
}
h1 {
width: 250px;
height: 40px;
background: #19b3f1;
margin: -380 auto 410;
}
[a] {
width: 200px;
background: #80cdf6;
}
</style>
Minified:
<body bgcolor=0D2328><p><h1><h1 a><style>p{width:80;height:240;margin:90 132;border:solid 20px#357597}h1{width:250;height:40;background:#19B3F1;margin:-380 auto 410}[a]{width:200;background:#80CDF6
27/01/2024
Solution:
<div></div>
<div a></div>
<style>
body {
background: #ffffa5;
}
div {
width: 120px;
height: 250px;
background: radial-gradient(circle at 50% 190px, #ffffa5 40px, #faba41 0);
border-radius: 60px;
margin: -78 52;
}
[a] {
margin: 18 212;
scale: -1;
}
</style>
Minified:
<body bgcolor=FFFFA5><p><p a><style>p{width:120;height:250;background:radial-gradient(1q at 50%76%,#FFFFA5 40px,#FABA41 0);border-radius:63q;margin:-78 52}[a]{margin:18 212;scale:-1
28/01/2024
Solution:
<div></div>
<div a></div>
<div a b></div>
<div b c></div>
<style>
body {
background: #6f234f;
}
div {
width: 30px;
height: 150px;
background: #f7bed9;
border-radius: 20px;
margin: 75 auto -225;
rotate: 45deg;
}
[a] {
rotate: -45deg;
}
[b] {
height: 210px;
rotate: 0deg;
margin: 45 auto -255;
}
[c] {
rotate: 90deg;
}
</style>
Minified:
<body bgcolor=6F234F><p><p a><p b><p b c><style>p{width:30;height:210;background:#F7BED9;border-radius:23q;margin:45 auto -255}[a]{rotate:90deg}[b]{height:150;rotate:45deg;margin:75 auto -225}[c]{rotate:-45deg
29/01/2024
Solution:
<div></div>
<h1></h1>
<h1 a></h1>
<style>
div {
width: 280px;
height: 180px;
background: linear-gradient(#a94ea4 50%, #f7bed9 50%);
margin: 60 auto;
border-radius: 20px;
box-shadow: 0 0 0 3in#6A1368;
}
h1 {
width: 100px;
height: 60px;
background: #a94ea4;
margin: -150 92;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
[a] {
background: #f7bed9;
margin: 30 192;
scale: -1;
}
</style>
Minified:
<p><h1><h1 a><style>p{width:280;height:180;background:linear-gradient(#A94EA4 50%,#F7BED9 0);margin:60+52;border-radius:21q;outline:solid+3in#6A1368}h1{width:100;height:60;background:#A94EA4;margin:-150+92;clip-path:polygon(0%0,100%0,50%100%)}[a]{background:#F7BED9;margin:30 192;scale:-1
30/01/2024
Solution:
<div></div>
<p></p>
<style>
body {
background: #d8b788;
color: #d8b788;
}
div {
width: 160px;
height: 160px;
background: radial-gradient(circle, #684c3b 60px, #d8b788 0);
border-radius: 20px;
outline: solid 20px #684c3b;
margin: 70 auto;
}
p {
width: 50px;
height: 50px;
background: #d8b788;
margin: -175 77;
position: fixed;
box-shadow: 180px 0, 90px 90px, 90px -90px;
}
</style>
Minified:
<body bgcolor=D8B788 text=D8B788><p><h1><style>p{width:160;height:160;background:radial-gradient(#684C3B 60px,#D8B788 0);border-radius:21q;outline:solid 22q#684C3B;margin:70 112}h1{width:50;height:50;background:#D8B788;margin:-175 77;position:fixed;box-shadow:60vh 0,95q 95q,95q -95q
31/01/2024
Solution:
<div></div>
<div a></div>
<style>
body {
background: #0d2328;
}
div {
width: 250px;
height: 250px;
background: radial-gradient(circle, #0d2328 100px, #0000 50px),
linear-gradient(to left, #80cdf6 50%, #23a440 50%);
border-radius: 50%;
margin: 25px auto;
}
[a] {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, #0d2328 50px, #0000 50px),
linear-gradient(to right, #80cdf6 50%, #23a440 50%);
margin: -225 auto;
}
</style>
Minified:
<body bgcolor=0D2328><p><p a><style>p{width:250;height:250;background:radial-gradient(#0D2328 25vw,#0000 53q),linear-gradient(90deg,#23A440 50%,#80CDF6 0);border-radius:50%;margin:25 67}[a]{width:150;height:150;margin:-225 117;background:radial-gradient(#0D2328 53q,#0000 0),linear-gradient(90deg,#80CDF6 50%,#23A440 0