Frequently Asked Questions

Everything you'll ever want to know

Is this free to play? #

Yes, CSSBattle is a free to play platform. It only costs you your time 😀

Do I have to login to play? #

Yes. You can see any target and try replicating it with code. But to submit and get a score, you'll need to login first.

Who can play this? #

CSSBattle needs you to code in HTML (slightly) and CSS. If you have ever coded in these 2 web technologies, you are all set to play here.

Even if you don't have any experience with HTML and CSS, they are super easy to start with. Open this CSS Reference in another browser tab, and get ready to battle!

What is a Battle? #

A Battle is a collection of unique targets with its own separate leaderboard. Each Battle runs for a set amount of days/weeks and once it's finished, the Battle leaderboard is locked, and the winners are crowned.

The targets in a Battle remain playable even after a Battle is over and changes in target leaderboard rankings still occur. This also affects the rankings in the Global Leaderboard.

Note: Battle names do not hold any relation to any of the targets or the game itself. Any resemblance is mere coincidence. Do not over-think them. 😬

How to play? #

The objective of the game is to write HTML/CSS to replicate the given target image in the least code possible.

In the target page, start coding in the editor area on the left. As you start typing, the output area in the middle will start rendering your code. When you're confident that the output matches the target image, hit the Submit button to see your score.

Important points to Note:

  • It is recommended to play on Chromium based browsers (Chrome/Safari) because that is what is used for scoring at the backend. Other browser may have some differences in how they render a particular code.
  • What you write in the editor, renders as it is. We make no change. This means you don't even get the DOCTYPE
  • Since this is "CSS" battle, you are not allowed to use JavaScript, SVG or images in your code. In fact any external asset is not allowed. All code required to generate the target image has to be written in the given editor only.

We also have a growing list of tips and tricks for CSS code-golfing.

Now go and climb the leaderboards!

How are scores calculated? #

Our scoring algorithm takes into account 2 things: 1) How closely you have replicated the target image 2) Number of characters in the code. Based on these 2 factors, a score is calculated. Better the match and lesser the characters used, more the score.

Also, it's worth mentioning that when your visual match with the target image is low, reducing character count won't give too much jump in score. Initially focus more on getting the match to 100%. Once you are on 100% match, the points start increasing more rapidly with decreasing character count. This exponential scoring is done to make it more rewarding for those who sweat it all out to get to extreme character counts!

Can I see solutions of other people? #

Since this is a game where players can play against each other for better rank, you cannot see the solutions of other players. That said, if you want to learn how other solutions, there are many ways to do so:

  • First of all, learn the basic tricks of CSS code-golfing on our Tips & Tricks page.

  • There are a lot of players sharing their solutions on Github, Youtube and our community forum. Just search for "CSSBattle solutions".

  • There are some "open" targets in each battle (after battle #12) in which top solutions are open for everyone. Eg. Target #62 - Sunset.

What environment are solutions evaluated in? #

Submitted code solutions are rendered in a headless Chromium browser on a Ubuntu 18.04 server.

Your code is rendered as it is without any modification and the browser settings are all set on default.

There might be slight differences in how different browsers render your code in the game preview. Hence till the time we find a way a reliable way to normalize these differences, we recommend playing on Chrome, Chromium, Brave or Safari browser (these are the ones we have tested).

How do I make use of friends? #

With Friends, you can now choose who you want to see in the leaderboards and see your standings among them (alongside global players).

To add friends:

  • Visit your friend's profile and click on the "Add to Friends" button.
  • Go to any page with a leaderboard and check "Friends Only" at the top. Now all the leaderboards will show your standings among just your friends.

Note: Adding someone as a friend sends them a notification so they can add you back!

What are the different type of Leaderboards? New#

From Battle #23 and onwards, we have implemented a new leaderboard system. Now, there are two types of leaderboards on CSSBattle:CSS Leaderboard and All Leaderboard.

  • The Pure CSS Leaderboard is where you will appear only if you have submitted a pure CSS solution. The Pure CSS Leaderboard is the default leaderboard and the scores on this leaderboard determine the ranking of users in the global leaderboard.
  • The All Leaderboard is where all users appear, including those with solutions that contain SVG-in-CSS or unicode characters. However, the scores on this leaderboard do not affect the global leaderboard rankings.

You can switch between the two with a toggle which appears next to the leaderboard heading in Battle #23+ and their targets.

What are Daily Targets? New#

Daily Targets are the perfect way to keep your CSS skills sharp. Every day, we release a new target for you to solve. You can play the Daily Target anytime during the day and submit your solution. New Daily Target drops every day at 00:00 UTC.

You can play only current day's Daily Target, unless you have a PLUS membership.

Daily Targets have no leaderboards. They are just for fun and practice. Though, you do get some fun stats for these - global ones and for your played ones too!

What are Streaks? New#

Streaks are a fun way to keep track of how many days in a row you have played CSSBattle. Any target (Battle or Daily) you play between 12am to 11:59pm in your timezone, counts towards your streak. If you miss a day (in your timezone), your streak resets to 0.

Note that Streaks are independent of Daily targets and their schedule. Streaks are based on your timezone - you have to play once during your day. Daily targets follow their own independent schedule - unlocking 12am UTC for eveyone together.

There is also a global Streak leaderboard in the Leaderboards section. Happy streaking!

Still have a question? Don't hesitate to ask it on our Community forum or tweet out to @css_battle