One Div CSS Art: Techniques for Creating Images with a Single Element

There is a particular kind of satisfaction that comes from extreme constraint. A poet working within the rigid structure of a sonnet. A chef with three ingredients. A CSS developer with one div. Welcome to the discipline of one div CSS art -- the practice of creating recognizable images, icons, and illustrations using nothing but a single HTML element and pure CSS.

This is not a theoretical exercise. Single element CSS is exactly what competitive CSS players rely on in platforms like StyleWars, where fewer elements often means a better score and a higher ranking on the leaderboard. If you can build complex visuals with one div, you can build anything.

This guide breaks down every technique that makes single element CSS art possible, from the foundational tricks to advanced combinations. By the end, you will build a complete landscape scene using nothing but one div.

Why One Div?

The obvious question: why limit yourself to a single element?

It forces mastery. When you cannot add more markup, you have to squeeze every last drop of capability out of CSS. You develop an intimate understanding of pseudo-elements, stacking contexts, gradient math, and shadow rendering that most developers never acquire.

It wins CSS battles. On competitive platforms, code length and element count are scoring factors. Players who can reproduce a target image with a single div consistently climb the rankings. If you want to improve your CSS battle strategy, one div techniques are essential.

It is transferable. The skills you build -- layering gradients, leveraging pseudo-elements, calculating shadow offsets -- are the same skills that make you faster and more creative in production CSS. Nothing is wasted.

Technique 1: Pseudo-Elements Give You Three Layers

A single div in HTML gives you one element. But CSS gives you two more for free: ::before and ::after. That means every one div project actually has three independently styled, positioned, and shaped layers to work with.

div {
  position: relative;
  width: 200px;
  height: 200px;
  background: #3498db;
  border-radius: 50%;
}

div::before,
div::after {
  content: "";
  position: absolute;
}

div::before {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  top: 40px;
  left: 45px;
}

div::after {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  top: 40px;
  right: 45px;
}

This creates a blue circle with two white circles on top -- the beginning of a simple face. The key rules for pseudo-elements in one div art:

• Always set content: "" or they will not render.
• Use position: absolute on the pseudo-elements and position: relative on the parent so you can place them precisely.
• Each pseudo-element can have its own background, border-radius, box-shadow, clip-path, and every other visual property. They are full elements in every way except that they do not exist in the DOM.

Three layers is more than enough for simple icons. But the real power of one div CSS art comes from stacking multiple techniques on each of those layers.

Technique 2: Multiple Box-Shadows for Duplication and Pixel Art

box-shadow is the single most powerful property in the one div toolkit. A single declaration can produce an unlimited number of copies of an element's shape, each with its own offset, size, and color. No extra elements required.

Duplicating Shapes

Need ten circles from one element? Use comma-separated box-shadows:

div {
  width: 20px;
  height: 20px;
  background: #e74c3c;
  border-radius: 50%;
  box-shadow:
    30px 0 0 #e67e22,
    60px 0 0 #f1c40f,
    90px 0 0 #2ecc71,
    120px 0 0 #3498db,
    150px 0 0 #9b59b6;
}

This draws six colored circles in a row -- one from the element itself and five from shadows. Each shadow is syntax: offset-x offset-y blur-radius spread-radius color. Setting blur to 0 produces a sharp copy. Adjusting spread lets you resize each copy independently.

Pixel Art with Box-Shadow

Pixel art is the classic application of box-shadow art. By making the element a single pixel-sized square and listing out hundreds of shadows, you can draw anything dot by dot:

div {
  width: 20px;
  height: 20px;
  background: #000;
  box-shadow:
    20px 0 #000,
    40px 0 #000,
    0 20px #000,
    40px 20px #000,
    0 40px #000,
    20px 40px #000,
    40px 40px #000;
}

This draws a simple 3x3 pattern with certain cells filled in. Scale it up with hundreds of shadows and you have detailed pixel art -- all from one element. Competitive CSS players on StyleWars use this approach to replicate complex bitmap-style targets with minimal HTML.

Technique 3: Multiple Backgrounds and Layered Gradients

The background property accepts a comma-separated list of layers. Each layer can be a full gradient with its own position, size, and repeat behavior. This turns a single element into a canvas that can hold dozens of independent shapes.

div {
  width: 300px;
  height: 200px;
  background:
    /* Sun */
    radial-gradient(circle 30px at 240px 40px, #f1c40f 100%, transparent 100%),
    /* Cloud */
    radial-gradient(ellipse 40px 25px at 80px 50px, #fff 100%, transparent 100%),
    radial-gradient(ellipse 50px 30px at 110px 45px, #fff 100%, transparent 100%),
    radial-gradient(ellipse 35px 22px at 135px 55px, #fff 100%, transparent 100%),
    /* Sky */
    linear-gradient(to bottom, #87CEEB, #e0f0ff);
}

This draws a sky with a sun and cloud -- no pseudo-elements used yet. The trick is that radial-gradient with a hard color stop (100% to transparent 100%) produces a sharp shape, not a soft glow. You can place and size each gradient independently using the at keyword for position and the size values before it.

Key principles for gradient-based drawing:

• Layers are painted front to back. The first gradient listed renders on top.
• Use transparent strategically so lower layers show through.
• Combine radial-gradient for circles and ellipses, linear-gradient for bars and stripes, and conic-gradient for pie shapes and angular patterns.
• Each layer can have its own background-size and background-position when you need finer control.

Technique 4: Border-Radius Tricks

border-radius is far more versatile than most developers realize. The shorthand accepts up to eight values (four for horizontal radii, four for vertical radii separated by a /), giving you precise control over every corner.

/* Quarter circle */
div {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  border-radius: 100% 0 0 0;
}

/* Pill / capsule shape */
div {
  width: 200px;
  height: 60px;
  background: #3498db;
  border-radius: 30px;
}

/* Egg shape */
div {
  width: 100px;
  height: 130px;
  background: #f5f0e1;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* Leaf / organic shape */
div {
  width: 100px;
  height: 100px;
  background: #27ae60;
  border-radius: 80% 0 80% 0;
}

The / syntax is the secret weapon. Values before the slash control horizontal radii; values after control vertical radii. This lets you create asymmetric, organic shapes that would otherwise require SVG paths. For one div CSS art, you will use this on the main element and both pseudo-elements, giving you three independently shaped layers.

Technique 5: Clip-Path for Complex Outlines

When border-radius is not enough, clip-path lets you cut an element into any polygon, circle, ellipse, or arbitrary path. For a deeper look at this property, see the clip-path examples guide.

/* Triangle */
div {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Star */
div {
  width: 100px;
  height: 100px;
  background: #f1c40f;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

/* Heart using clip-path */
div {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  clip-path: path('M50,30 A20,20,0,0,1,90,30 A20,20,0,0,1,50,75 A20,20,0,0,1,10,30 A20,20,0,0,1,50,30 Z');
}

The polygon() function is the workhorse for geometric shapes. For curves, path() accepts SVG path data directly, giving you Bezier curves and arcs within CSS. The tradeoff: clip-path clips content that extends outside the path, so box-shadow on a clipped element will not be visible. Plan your layering accordingly.

Technique 6: Outline and Outline-Offset for Extra Borders

When you need an extra border ring and you have already used border and box-shadow for other purposes, outline and outline-offset give you one more layer:

div {
  width: 80px;
  height: 80px;
  background: #3498db;
  border: 5px solid #2c3e50;
  border-radius: 50%;
  outline: 5px solid #e74c3c;
  outline-offset: 5px;
}

This draws a circle with a dark border, a gap, and then a red ring around it -- three visual rings from one element, before you even touch pseudo-elements or box-shadow. The outline-offset property pushes the outline away from (or into, with negative values) the border edge, creating visible gaps or overlaps.

Note that outline does not follow border-radius in all browsers, though modern browsers have improved support significantly. Test your target browsers if you rely on this for rounded shapes.

Putting It All Together: A One Div Landscape

Theory is useful, but the real test is combining techniques into a finished piece. Let us build a simple landscape scene -- mountains, a sun, sky, and ground -- using exactly one div and zero pseudo-elements on the main layer, saving ::before and ::after for additional details.

<div class="landscape"></div>

.landscape {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  /* Sky gradient + sun + mountains + ground */
  background:
    /* Sun */
    radial-gradient(
      circle 25px at 320px 60px,
      #f1c40f 100%, transparent 100%
    ),
    /* Mountain 1 (left, taller) */
    linear-gradient(125deg, #5d6d7e 50%, transparent 50%) no-repeat 0 100% / 220px 180px,
    linear-gradient(-125deg, #5d6d7e 50%, transparent 50%) no-repeat 60px 100% / 220px 180px,
    /* Mountain 2 (right, shorter) */
    linear-gradient(130deg, #7f8c8d 50%, transparent 50%) no-repeat 160px 100% / 200px 140px,
    linear-gradient(-130deg, #7f8c8d 50%, transparent 50%) no-repeat 260px 100% / 200px 140px,
    /* Ground */
    linear-gradient(to bottom, #27ae60, #1e8449) no-repeat 0 230px / 400px 70px,
    /* Sky */
    linear-gradient(to bottom, #2c3e50, #3498db, #85c1e9);
}

/* Clouds via ::before */
.landscape::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 40px;
  left: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    18px -4px 0 5px #fff,
    36px 0 0 2px #fff,
    55px 2px 0 -2px #fff,
    140px 20px 0 0 #fff,
    158px 14px 0 6px #fff,
    178px 18px 0 3px #fff;
}

/* Trees via ::after */
.landscape::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 30px;
  background: #6d4c41;
  bottom: 40px;
  left: 60px;
  border-radius: 2px;
  box-shadow:
    80px 10px 0 0 #6d4c41,
    280px 5px 0 0 #6d4c41,
    /* Tree canopies - using spread-radius to make wider circles */
    0 -22px 0 10px #27ae60,
    80px -12px 0 10px #2ecc71,
    280px -17px 0 12px #27ae60;
}

Let us break down what is happening:

1. The main div uses layered gradients for the sky, two mountains (each built from a pair of angled linear-gradients that meet at a peak), a ground strip, and a sun. That is seven gradient layers on a single element.
2. ::before is a small white circle positioned as a cloud. Its box-shadow creates additional cloud puffs and a second cloud cluster further along.
3. ::after is a tree trunk. Its box-shadow duplicates the trunk in two more positions and adds green circular canopies above each trunk by using negative Y offsets and positive spread values.

The total: one HTML element, zero JavaScript, zero images, and a recognizable scene with sky, sun, clouds, mountains, trees, and ground. Every technique from this article is represented -- gradients for the terrain, box-shadow for duplication, border-radius for organic shapes, and pseudo-elements for extra layers.

Tips for Your One Div Practice

Start with the element count, then plan your layers. Before writing any CSS, sketch out which visual elements go on the main div (usually backgrounds), which go on ::before, and which go on ::after. Assign the role with the most duplicated shapes to the layer that will use box-shadow.

Use overflow: hidden liberally. When you build shapes from gradients or position pseudo-elements partly outside the parent, overflow: hidden cleans up the edges and lets you work with shapes that extend beyond the bounding box without visual artifacts.

Debug with outlines. When layering becomes complex, temporarily add outline: 1px solid red to the pseudo-elements so you can see their bounding boxes. This is far easier than guessing at pixel offsets.

Practice in competitive settings. The fastest way to improve at single element CSS is to practice under constraints. The 1v1 competitive mode on StyleWars is excellent for this -- the time pressure forces you to internalize techniques rather than constantly looking them up. And if you want more general tricks for writing shorter CSS, the CSS tips and tricks guide pairs well with the one div workflow.

Read other people's solutions. After completing a CSS battle, study the top-scoring solutions. You will consistently find one div approaches that combine techniques in ways you had not considered. That exposure compounds quickly.

Conclusion

One div CSS art is not a parlor trick. It is a concentrated form of the same skills that make someone excellent at CSS in general: precise control over layering, creative use of gradients and shadows, and a deep understanding of how pseudo-elements behave. The techniques covered here -- pseudo-element layering, box-shadow duplication, multiple backgrounds, border-radius shaping, clip-path clipping, and outline offsets -- form a complete toolkit for building virtually any image from a single HTML element.

The best way to internalize these techniques is to use them under pressure. Pick a target image, open a single div, and start building. When you get stuck, revisit the specific technique sections above. And when you want to test your skills against real challenges and real opponents, StyleWars is where one div CSS art meets competition.