Blog

Target (25/08/2025) - 3rd place

Solution (162 characters):

Breakdown:

The HTML element doesn't do much in this solution (other than have some margin applied to it), the heavy lifting is done by the body element and two image elements. The box shadow property is used to create the 3 horizontal bars on each section. Padding is used for the img elements to set their size, margin for positioning and then rotate for obvious reasons.

There is one interesting trick used in this solution that I've learned to do recently: using a single margin property to position two elements. My old method of positioning two elements with margin would be:

That method sets the margin on img elements, then uses the adjacent sibling selector to target its next sibling and apply different margin there. The new method uses a single margin property, with a very high negative value, to position both images exactly where they need to be. This results in the element that appears first in the DOM, appearing to render last visually.

Here are the styles, unminified:

Target (18/08/2025) - 4th place

Solution (155 characters):

Breakdown:

A super quick breakdown of this solution (because I want to get into the gradient specifically): used for the two rectangles, and the gradient makes up the two half circles. Margin for positioning. That's it. Now let's talk gradients.

The use of gradients in these solutions seemed like witchcraft to me for the longest time, but now I understand them well enough to start giving an explanation. I want to start by breaking up the background shorthand a bit, which will make it easier to read. This shorthand:

is equivalent to this:

That makes things clearer. We can see that the image, position, and size are all set in this shorthand. Typically, gradients have smooth transitions between colors, but in this case we need hard stops. To achieve this, we need to define the start and end positions of the colors, with each colors start position being the same as the previous colors end position. Example:

Lucky for us, there's a shorter way to do this. Instead of putting the previous colors value, we can just add a 0. Example:

Here are the styles, unminified:

Target (17/08/2025) - 7th place

Solution (247 characters):

Breakdown:

BIRB. This solution uses 3 additional elements: two images and a paragraph. The two images make up the eyes of the birb. img elements used here because of their inline-block display value so they render next to each other. I used a radial gradient for this so that I can achieve a rounded inner circle, with a rounded outer circle that has one corner with a border-radius of 0. This way I only need one element for each eye. To get the second eye to have the sharp corner at a different position to the first, I used a variable and the sibling selector. I used a p tag for the 'beak' of the birb. The usual triangle trick is used here where an element is given a border but no width or height, then one of the borders get a color, while the rest remain transparent. To get the right shape of triangle, I used the scale property. Another way to do this would be to set , but that uses more characters.

Here are the styles, unminified:

Target (14/08/2025) - 10th place

Solution (145 characters):

Breakdown:

OK this was a cool one. I really enjoy challenges like this - a good balance of complexity, and not a problem best solved using only gradients (which gets a bit boring imo). I used a dotted border to create the 3 top dots (html element) and single bottom dot (body element). Used a radial gradient to draw the half circle, and fill in the orange background.

I want to take a bit of a deeper look at the radial gradient in this solution though, as it was revealed that there was a lot I could have done to optimize this. Looking at the background shorthand code again: We have here:

• A circular radial gradient (1q) positioned at 50% on the x-axis and 0 on the y-axis. Note that this could be shortened by one character to
• A gradient with 2 colors (orange and black) and hard stops at 40px (5ch) and 80px (5pc).
• A background size of 300% on the x-axis and 109% on the y-axis.
• A background position of 50% on the x-axis and 111% on the y-axis

This is a decent illustration of the sheer power of gradients in CSS. They are an essential tool in any CSS Battlers toolbelt.

Here are the styles, unminified:

Target (12/08/2025) - tied for 3rd place

Solution (175 characters):

Breakdown:

Alright nothing too fancy happening in todays solution. We have 3 elements (html, body, img) all with a white border and a purple background. Html and body elements give us the '0's of this percentage sign, and the img tag takes up the responsibility of the slash. One good trick in this solution is purely using scale to size the img. Since we already need scale to change the size of the border of the img, we can also use it to give it its height. This way we don't need padding or height to set its size.

Here are the styles, unminified:

Target (29/07/2025) - 6th place

Solution (179 characters):

Honestly I can't believe this actually made top 10. Was not happy with this solution with all px units, decimal places, and high character count.

Breakdown:

Anyway, I'll make this quick because I'm not fond of this solution. Html element makes up the 'arms' (that's what they look like to me at least) with the border property. Same border is applied to body element, but zoom is used to increase the size of the border so that it makes up the 'body' of the target. Finally the p tag takes up the task of becoming the 'head' of the target with a yellow border.

Here are the styles, unminified:

Target (24/07/2025) - 1st place

Solution (110 characters):

Breakdown:

Along with the html and body elements, this solution uses 1 paragraph element. The universal selector sets the background, padding, and border-radius of all elements to the same value. The only other rules are the one setting the background and margin of the body element, and the zoom on the paragraph.

Background for color, margin for positioning and border radius rules are obvious enough. What I find interesting about this solution is the padding and zoom. The padding property solves two purposes here:

1. Gives the paragraph some height
2. Gives some space around the paragraph inside the body

This is very handy because usually you can't use margin to position a block element further down due to margin collapsing. There are several ways around this, and padding is one of them.

The other interesting part of this solution is the zoom property. This increases the size, and border radius of the paragraph, which is exactly what we need.

Here are the styles, unminified:

Target (20/07/2025) - 10th place

Solution (190 characters):

Breakdown:

Along with the html and body elements, this solution uses 2 paragraphs and an image element. When additional elements are needed, I usually reach for the p tag as it is only 1 character long, and has the nice feature of not needing closing tags, because the browser already auto-closes paragraphs to avoid rendering nested paragraphs. I use the img element along with the p tags, because it is (AFAIK) the element with the least characters that still renders as an inline-block.

The background element has the yellow background, the body element and the p tags have the green rounded background, and the img element gives us the 2 round circles using the border-inline rule.

One rule here whose intention may not be clear is the . Reason I added this in is because you can't position a block element (p tag in this case) down on the vertical axis when it's directly inside of a body tag because the margins collapse. Inverting the body element with scale means that we can have that spacing at the 'top'.

Here are the styles, unminified:

Target (16/07/2025) - tied for 9th place

Solution (132 characters):

Breakdown:

This solution uses the html and body elements. Both share the same styles but the body element has some additional styles to adjust the position of the box shadow (with the --x variable), the size (zoom) and position (margin).

The zoom propery is an interesting new property. It is similar to the scale property (be it as part of a transform or standalone property). One of the notable differences between zoom and scale is that while both scale the element, zoom causes layout shift while scale does not. Also zoom is 4 chars while scale is 5 so it's generally preferred to use zoom if possible in code golf.

Here are the styles, unminified:

Target (15/07/2025) - tied for 4th place

Solution (111 characters):

Breakdown:

This solution uses only the html element. Only 3 properties were used here. The border block property gives us the top and bottom yellow bars, margin-left pushes the bars over to the right, and a radial gradient is set with the background property.

The background property is worth exploring here. The background shorthand used is equivalent to:

This sets the background image as a radial gradient. The gradient repeats because the background size is less than the total area the element covers. Because only the first value is set for the background position on the x axis, the y value remains on the default 'center'.

Here are the styles, unminified:

Target (23/06/2025) - tied for 2nd place

Solution (135 characters):

Breakdown:

This was achieved with the html and body elements only. The green outer area is achieved with a box-shadow on the html element. The red and yellow areas were achieved with a radial gradient on both elements. A border radius is given, then some margin for positioning. Pretty straightforward.

Interestingly, out of the top 10 the only solutions had either 134 or 135 characters. All the solutions had the exact same rules, but the players with 134 chars where a bit more succinct with their selectors.

The use of box-shadow may not be so intuitive this time, but the reason it is used is because the background/ background color property was already in use, and using outline or border instead would have prevented the overlap of the body element from being visible.

Here are the styles, unminified:

Target (20/06/2025) - 4/10

Solution (103 characters):

Breakdown:

This challenge was done with only 2 properties (box-shadow and color) and 1 element (html). We have 4 shadows on the html element. The first shadow is the orange around the border. The second shadow is the blue on the left side, and the third and fourth create the blue horizontal bar in the middle.

2 tricks in this one:

• Because there are 2 blue shadows, we use the color property to set the default box shadow color used. That way we don't have to type out the blue hex twice and save a whopping 1 character.
• Second trick is to not use the color in the target, and rather use a shorter hex version (the 3 character format) to save 3 characters. The color to use in this one was . I took that color to this website which can be used to find the closest 3 character hex for a given color, and it spat out . This rarely works for me, as you can't get the same accuracy of color most of the time, but it's a nice trick to know.

Here are the styles, unminified:

Target (17/06/2025) - 7/10

Solution (148 characters):

Breakdown:

Another pretty straightforward challenge. We have 4 elements here. HTML element makes up the lighter outer background, body the inner darker background, and the two p tags become the 6 rectangles. I use padding on all elements, which takes the place of height for the p tags, and also prevents the margin collapsing behavior between the body and p tags. Used box-shadow to create the darker rectangles to the left and right of the p tags.

One more trick worth mentioning is the use of the property. I set the color on the p tags, so that I don't need to repeat it for each box shadow.

Here are the styles, unminified:

The only real difference between my solution and the top solution is the method of positioning for the p tags. My method sets the position of the first one, then has a second rule for the second paragraph. Instead of this, the top solution uses some clever margin positioning to circumvent the need for a second rule.

Here's the code in question: The interesting part about this is that the first paragraph (as ordered in the DOM) appears BELOW the second paragraph. I'll be totally honest, I do not understand how this works.

Target (05/06/2025) - 7/10

Solution (130 characters):

Breakdown:

This was a pretty simple challenge. The idea here was 3 elements with the same dark blue background and a light border. Only a tag is added, giving us 3 elements total. The html element is given a border radius for the rounded part of the image, and other than that there is just margin for positioning and a height given to the tag.

Here are the styles, unminified:

Target (04/06/2025) - 5/10

Solution (111 characters):

Breakdown:

No extra markup was added in this challenge, only used the html and body elements that are already on the page. My plan with this challenge was to create 2 circles with the same background. The shortest way I know this can be done is with a radial gradient as a background image. I'll break down each part of the background rule, seeing as it's the only rule other than the margin used for positioning the body element.

Here is the background shorthand rule, broken up into it's parts:

So the first part is the background image where we have a radial gradient, and the first part of that is the . This is the shape of the gradient. Instead of putting , we can save a few characters by using the length value instead. As mentioned on the MDN page linked above:

When the keyword is omitted, the gradient shape is determined by the size given. One value provides a circle, while two values in units provide an ellipse. A single value is not valid.

Next, we have the gradient code, which uses hard stops to give a solid gray circle on a green background. Then we have the position x and y which is self explanatory. The last important part of this is the background size. I've made this larger than the viewport height, to prevent the circle of the background from being repeated. The alternative to achieving this is giving it a background attachment of fixed (more characters), or setting the background size to be smaller than the viewport (which won't work because it cuts of the green background).

Here are the styles, unminified:

Target (31/05/2025) - 6/10

Solution (134 characters):

Breakdown:

The idea here was to use 4 elements that all have a rectangle on their left and right sides. The shortest way I know of doing this is with border-inline or border-block. So we give every element (html, body, p, and img) the border styles and background as well as a rotatation. Then there is just margin for positioning and padding to set the size of the img tag.

Markup:

Here are the styles, unminified:

Target (30/05/2025) - 6/10

Solution (214 characters):

Breakdown:

This is the markup we add to the page, which gives us 2 paragraphs with an image in each.

Here are the styles, unminified:

Some of the tricks used in this one:

• use 11q instead of 10px for the border radius
• set the color property, so we don't have to repeat it for each box shadow
• drop the # from the hex code for the color property
• use 5vw for 20px
• use 5ch for 40px
• use 30vw for 120px
• use 85Q for 80px
• use inset 0 0 0 1in for the first box shadow instead of declaring a background color