CSS Battle Solutions

January 2025

30 solutions completed this month

Target #1

184b
Wednesday, January 1, 2025
medium
Target 1 comparison
View CSS (184 bytes)
&,[a]{background:#f7cb71}h1{-webkit-box-reflect:left -4in}p{+p{+p{width:0;margin:0 92}rotate:-45deg;margin:-40 32}margin:130 0 0 32;background:#7c3219;padding:20;width:120;rotate:45deg

Target #2

236b
Thursday, January 2, 2025
easy
View CSS (236 bytes)
*{background:var(--b,#2F5A76);*{--b:#F5BB60;margin:45 35-15;p{color:#2F5A76;--b:#2F5A76;padding:15;margin:0;translate:var(--t,0 30px);box-shadow:0 120px}+p{rotate:90deg;--t:60px;+p{margin:60 90;--t:120px -30px;box-shadow:0 120px,0 240px

Target #3

199b
Friday, January 3, 2025
medium
View CSS (199 bytes)
*{background:#F5E3B5;*{background:linear-gradient(#0000 60px,#469DBA 0 95q,#0000 0),radial-gradient(circle at 240px 0,#0000 60px,#469DBA 0 120px,#0000 0);margin:60 80;-webkit-box-reflect:below -180px

Target #4

118b
Saturday, January 4, 2025
medium
View CSS (118 bytes)
*{background:#2F5A76;border:20px solid#F3AC3C;margin:35 120;*{margin:65;translate:-185px;padding:0 150;border-width:30

Target #5

186b
Sunday, January 5, 2025
medium
View CSS (186 bytes)
*{border-radius:50%;background:linear-gradient(90deg,#0000 75px,#B8F4A6 0 125px,#0000 0),linear-gradient(#3BA44D 75px,#B8F4A6 0 125px,#3BA44D 0);margin:-135-110;border:160px solid#B8F4A6

Target #6

127b
Monday, January 6, 2025
medium
View CSS (127 bytes)
*{background:#B8DCF0;*{rotate:45deg;background:#3F4869;margin:115 165;color:3F4869;box-shadow:112q 112q 0 38q,-112q -112q 0 38q

Target #7

171b
Tuesday, January 7, 2025
medium
View CSS (171 bytes)
*{background:radial-gradient(var(--a, #4A9A86 0,#4A9A86 0));+*{display:flex;margin:100 50;p{padding:40;margin:10;--a:#FAE29E 20px,#4C4C6B 0;+[a]{--a:#4C4C6B 20px,#FAE29E 0

Target #8

149b
Wednesday, January 8, 2025
medium
View CSS (149 bytes)
*{background:#D95362;body{background:#2D3464;border-radius:50%;margin:40 90;p{position:fixed;margin:35 90;padding:37 20;+p{padding:20 75;margin:90 35

Target #9

221b
Thursday, January 9, 2025
easy
View CSS (221 bytes)
*{background:#FADE8B;color:61A74E;border:solid;border-width:0 40 40;margin:15 105 55;border-radius:0 0 127q;*{border-radius:50%;border-width:40;margin:0-80 70 70;box-shadow:-159q 159q 0-40px#FADE8B,-159q 159q,0-11q#FADE8B

Target #10

201b
Friday, January 10, 2025
easy
View CSS (201 bytes)
&{border-radius:50%;margin:-90 0-10;background:linear-gradient(#FFE4E0 50%,#0000 50%),radial-gradient(#FFE4E0 100px,#E05947 0 150px,#FFE4E0 0 300px);*{background:#E05947;margin:140 175;translate:0 40px

Target #11

155b
Saturday, January 11, 2025
medium
View CSS (155 bytes)
*{background:#2F5A76;margin:20 70 70;+*{border:30px solid#7EA6DD;-webkit-box-reflect:below -20px;border-radius:50%;i{position:fixed;padding:40;margin:20-50

Target #12

196b
Sunday, January 12, 2025
medium
View CSS (196 bytes)
*{background:#668884;margin:15;color:#668884;body{background:#EED9D9;p{padding:20;width:46;translate:6px;box-shadow:14q 40px,94q 40px,36q 80px,62q 80px,144px 80px;+p{translate:218px 145px;scale:-1

Target #13

105b
Monday, January 13, 2025
medium
View CSS (105 bytes)
*{background:#587795;*{background:radial-gradient(#0000 10px,#E8AD6D 0 20px)-10px/60px 60px;margin:70 120

Target #15

168b
Wednesday, January 15, 2025
medium
View CSS (168 bytes)
*{background:#E0E7FF;border: solid#4F77FF;border-width:75 0;margin:0 185;*{border-color:#0000#0000#4F77FF;border-width:30;margin:0-76 90;-webkit-box-reflect: below 30px

Target #16

132b
Thursday, January 16, 2025
medium
View CSS (132 bytes)
*{background:#8F77DA;p{background:#A1E6E4;margin:-78 29q;padding:35;rotate:55deg;translate:1q 134q}+p{rotate:-55deg;translate:0 142q

Target #17

194b
Friday, January 17, 2025
medium
View CSS (194 bytes)
*{background:#61A74E;color:#fff;margin:30;border:20px solid#fff;body{margin:60 110;border-radius:50%;p{position:fixed;padding:30 10;left:0;top:70;box-shadow:140px -74q 0-21q;+p{scale:-1;left:280

Target #18

170b
Saturday, January 18, 2025
medium
View CSS (170 bytes)
p,a{position:fixed;padding:20;margin:52 72;border:40px solid#328FC1;border-radius:50%}a{border-width:0 40 40 0;border-radius:0 0 100%;padding:40;margin:0-60}p+p{left: 128

Target #19

159b
Sunday, January 19, 2025
medium
View CSS (159 bytes)
*{background:radial-gradient(circle at 0 0,#FADE8B 70px,#328FC1 0 4in,#0000 0);margin:0;*{scale:-1;p{position:fixed;padding:70;margin:80 130;background:#FADE8B

Target #20

131b
Monday, January 20, 2025
medium
View CSS (131 bytes)
&{background:#F9DDC6;margin:-85-6;border:1in solid#594C94}p{color:594C94;padding:13 97;box-shadow:-18px 42px,18px 118px,-18px 194px

Target #21

133b
Tuesday, January 21, 2025
medium
View CSS (133 bytes)
*{background:#2F5A76;*{background:#BFE33A;margin:80 8;p{position:fixed;margin:-5 117;rotate:45deg;padding:35;border:40px solid#2F5A76

Target #22

180b
Wednesday, January 22, 2025
medium
View CSS (180 bytes)
*{background:linear-gradient(#DE6B67 214px,#EDDF5A 0 240px,#DE6B67 0);margin:0;*{color:#EDDF5A;background:#DE6B67;margin:150 186 18;box-shadow:0 -131px 0-1px,-26px -56px,26px -56px

Target #23

176b
Thursday, January 23, 2025
medium
View CSS (176 bytes)
*{background:#A1E6E4}&{border:60px solid#2F5A76;margin:50}p{position:fixed;padding:15;color:A1E6E4;margin:17-38;box-shadow:210px 0,-30px -85px,-30px 85px,240px 85px,240px -85px

Target #24

155b
Friday, January 24, 2025
medium
View CSS (155 bytes)
*{margin:0;background:radial-gradient(1q at 150px,#0000 90px,#E0E7FF),radial-gradient(1q at 250px,#0000 90px,#E0E7FF),linear-gradient(#328FC1 50%,#2D3464 0

Target #25

230b
Saturday, January 25, 2025
easy
View CSS (230 bytes)
*{background:linear-gradient(var(--r,90deg,#EA9A52 44%,#FFF 0 56%,#EA9A52 0));margin:-55;border-radius:10em;border:30px solid#435998;position:fixed;padding:200 125;top:-225;left:100;*{--r:90deg,#0000 44%,#FFF 0 56%,#0000 0;top:175

Target #26

159b
Sunday, January 26, 2025
medium
View CSS (159 bytes)
*{background:linear-gradient(90deg,#FFF 30px,#AC342E 0)185px;+*{color:FFF;margin:135 120;box-shadow:inset 0 35q,160px 75px,-160px 75px,160px -75px,-160px -75px

Target #27

162b
Monday, January 27, 2025
medium
View CSS (162 bytes)
*{background:#469DBA;color:F5E3B5;*{background:#F5E3B5;margin:135;translate:-205px;box-shadow:0-120px,0 120px,60px -60px,60px 60px;-webkit-box-reflect:right 280px

Target #28

158b
Tuesday, January 28, 2025
medium
View CSS (158 bytes)
*{background:linear-gradient(90deg,var(--b,#D08825 141px,#2D3464 0 259px,#D08825 0));*{--b:#FADE8B 130px,#2D3464 0 200px,#FADE8B 0 330px,#2D3464 0;margin:85 0

Target #29

191b
Wednesday, January 29, 2025
medium
View CSS (191 bytes)
*{margin:0;background:radial-gradient(circle,var(--a,#FADE8B,#61A74E 0 48%),#0000 0),linear-gradient(#FADE8B 50%,#61A74E 0 190px,var(--c,#FADE8B)50%);*{--a:#61A74E 16%,#FADE8B 0 32%;--c:#0000

Target #30

254b
Thursday, January 30, 2025
easy
View CSS (254 bytes)
*{background:radial-gradient(1q,#4B4D88 53q,#5AED9C);*{background:#4B4D88;border-radius:1in;margin:24 185 216;p{margin:28 68;padding:30 15;position:fixed;rotate:45deg}p+p{left:49;rotate:-45deg}[a]{rotate:90deg;margin:96 40;-webkit-box-reflect:below -267q

Target #31

154b
Friday, January 31, 2025
medium
View CSS (154 bytes)
*{background:#2F5A76;border:43q solid#C15965;margin:40 60;box-shadow:0 85q#2F5A76}&{border-radius:2in;*{border-color:#000#0000#C15965;border-width:0 40 60