๐ŸŽจ Challenge #1

๐ŸŽฏ Target400ร—300
โœ๏ธ Your CSS0 chars
๐Ÿ‘ Preview
Ctrl+Enter

๐Ÿ“– CSS Reference

Layout

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;

Grid

display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;

Positioning

position: absolute;
top: 50px; left: 100px;
/* center trick */
position: absolute;
inset: 0; margin: auto;

Shapes

border-radius: 50%; /* circle */
border-radius: 10px; /* rounded */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Colors & Gradients

background: #e74c3c;
background: linear-gradient(to bottom, #000, #fff);
background: radial-gradient(circle, #f00, #00f);
box-shadow: 0 0 20px #f39c12;

Transform

transform: rotate(45deg);
transform: scale(1.5);
transform-origin: center;

Size

width: 200px;
height: 200px;
aspect-ratio: 4/3;
overflow: hidden;

Code Golf Tips

/* Use short colors: #000 not black */
/* body margin:0 is default in iframe */
/* Omit units on 0: margin:0 */
/* Use p or a instead of div (1 char) */

โœ๏ธ Create Custom Challenge