CSSBattle Solutions

Note: I have stopped doing the daily battle. I completed every daily CSSBattle from 6/28/23 to 1/1/25.

Thoughts

• With these solutions, you should get close to the Top 100 when you incorporate all the optimized open solutions.
• I don't care about the leaderboard, as I knew I didn't want to dedicate the time necessary to be in the top 50.
• If you look at the pro users, you can see how many times they verify solutions, and the attempts can be quite high for most of the top scorers.
• The daily CSSBattle was good for engagement, but it was tough to keep up with, so I limited the time I spent to 15 minutes. This created problems when some daily battles were too difficult for such a time limit. Also, I avoided trying newer techniques just to get the battles done as quickly as possible.
• On occasion, I ended up spending more time on a battle, particularly when technical bugs or site issues prevented me from hitting 100%.
• It is important to note that the battles are designed in Figma. The creators can't verify all battles are solvable ahead of time.
• Some battles launched with game-breaking bugs. Abstract Plate and Negative Box both required post-release adjustments to become solvable.
• As the rate of battles increased, fixing unsolvable daily battles was abandoned and stats were adjusted to preserve completion percentage.
• The harder main battles typically required 30 to 45 minutes to achieve 100%. When I get stuck at 99.9%, it is often helpful to step away and return to them later. Using the CSSBattle Previewer site allows you to bypass a lot of tedious trial and error.
• While CSSBattle's tips build a strong foundation, reaching the top of the leaderboard requires going far beyond the basics.
• The best solutions from the earliest battles relied on clip-path and unicode. However, gradient properties have become the preferred approach for achieving optimal solutions. To lower character count, border and box-shadow should replace gradient properties. Using linear-gradient for too many shapes will balloon your character count. While box-shadow easily solves battles with a few shapes, it eventually becomes sub-optimal as shape count increases.
• CSS Nesting is helpful, but you will primarily want to use the style attribute on the body tag to reduce the need for extra element tags.
• Refactoring is much easier when using p tags with custom attributes. Mixing multiple element types like div or headings often introduces unexpected margin conflicts.
• You can temporarily set margin: 0 to focus entirely on matching shape alignments, then define your final margins at the end. While I initially relied on absolute positioning, using pure margin proved to be a more efficient approach.
• Using clip-path for triangles is a gamble and can be time-consuming to adjust.
• To get the best solutions, you need to incorporate tools and use generators and online editors.
• You should use the Chrome browser to ensure accurate match verification. Even then, the in-game preview can be slightly off, so using the CSSBattle Previewer website (listed below) can help you perfect your solution. Keep in mind, however, that the previewer is only updated for the main battles.
• If you find yourself using fractional values (like 10.5px), you are likely dealing with a rendering or rounding error; surprisingly, a slightly worse-looking match in your browser might actually be the correct 100% solution.
• Sub-pixel rendering errors are possible when using border-radius and clip-path.
• Many colors can be compressed to shorter, three-character hex codes. Success varies widely, so this requires significant trial and error.
• Unassisted AI will not solve many of these battles. You can’t simply upload the battle image to Gemini and expect a perfect match. Battle names often mislead agents, so omitting them is usually the better choice. Although AI has improved, it’s most effective when paired with picture‑matching libraries and backend systems that can drive it through an iterative prompting loop. A perfect match is essential before any golfing can begin. AI operates much like a hill-climbing algorithm—it is just as likely to degrade a solution as it is to improve it. Maximizing success requires guiding the model with precise, incremental prompts.

Battles that need to be updated (99.9% or lower)

• Lookaway
• Black Widow
• Froggy
• Pacman
• Abstract Plate
• RootLearn
• Pieces
• Magneto's Helmet
• Abstract Firefly
• Sitepoint Logo

Useful Resources

• CSSBattle
• CSSBattle Previewer
• Github - CSSBattle Forum
• Github - clip path generator
• Github - SVG path editor
• CSS Tricks - shapes of CSS
• Paulund - CSS shapes
• Stack Overflow - circle inside another circle
• Stack Overflow - teardrop
• Stack Overflow - intersection color in venn diagram
• CSS Portal - clip path generator
• Stack Overflow - CSS chevron
• Stack Overflow - CSS triangle whole width fixed height
• Coding Dude - CSS triangle
• YouTube - Create Slanted or Razor-Blade Div Shapes with CSS3
• RipTutorial - 3D cube
• Codepen - 3D rectangle shape
• Stack Overflow - half circle with css border
• CSS Tricks - make a curved line
• JS Fiddle - CSS checkmark
• Codepen - CSS checkmark
• Stack Overflow - Parallelograms
• Stack Overflow - Oval
• W3 Schools - Pill button
• Stack Overflow - CSS inset borders
• Stack Overflow - L shaped border
• CSS Tricks - Multiple borders
• Geeks for Geeks - semi circle
• Stack Overflow - CSS u shaped or curved borders
• Codepen- Cylinder
• Stack Overflow - smile horseshoe
• Stack Overflow - cut a circle in half
• Stack Overflow - how to bend a div in CSS
• Codepen - eye shape
• 1-notes - CSS swirl design
• Dev.to - CSS only outlined triangle
• CSS.gg - shape-triangle
• Coding Dude - create a triangle
• HashNode - how to make a moon with CSS
• Toptal - CSS minifier
• Unused CSS - CSS half circle
• Stack Overflow - how to make circles repeat in the background of an element
• Stack Exchange - eye shape in CSS
• CSS Tricks - play and pause css animations
• W3 Schools - CSS loader
• Stack Overflow - CSS border shorthand when each border has a different width
• Codepen - CSS alphabet
• Blog - pure CSS lettering a bad and fun idea
• CSS Tricks - building progress ring quickly
• YouTube - How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar
• Blog - circle progress bar CSS
• Github - SVG circle progress generator
• Stack Overflow - HTML5 CSS3 circle with partial border
• Stack Overflow - squiggly line
• singhak - quarter circle with CSS
• Stack Overflow - create a two color circle
• Stack Overflow - draw a curve with CSS
• Abobe - image gradient
• Colorzilla - gradient editor
• JS Fiddle - CSS alphabet
• Stack Overflow - curved line CSS rounded border
• Stack Overflow - CSS curved line
• YouTube - CSS triangle with border - Shape | web zone
• Dev.to - drawing a triangle with CSS
• Stack Overflow - how to create a transparent triangle with border using CSS
• Stack Overflow - element with border radius inside element with border radius is not consistent
• Stack Overflow - draw diagonal lines in div background with CSS
• Medium - HTML CSS how to split a background into 2 colors
• LogRocket Blog - yin yang symbol pure CSS
• Codepen - how to create yin yang symbol pure CSS
• Blog - drawing a triangle with CSS
• Useful Angle - CSS triangle
• Github - box shadow and border-radius doesn't always look right
• Stack Overflow - how do I draw a diagonal div
• CSS Tricks - a CSS golfing exercise
• Sitepoint - CSSBattle tips
• MDN Docs - CSS Nesting
• Medium - slanted background with clip path
• Stack Overflow - tapered div using CSS
• Play CSS - CSSBattle Knockoff Play CSS
• Codepen - CSS triangle clip paths
• Stack Overflow - quarter of a ring with css and html
• CSS Generators - A wide range of CSS generators to make your developer's life easier!
• CSS Battle Toolbox - A set of tools for CSSBattle, directly in the battle interface.
• artlung-cssbattle-plugins