Frequently Asked Questions

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

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.

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!

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. 😬

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!

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!

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, our Discord server and our community forum. Doing a search for "CSSBattle solutions" on Google can be a good start.

• There are some "open" targets from different battles in which top solutions are open for everyone. Eg. Target #62 - Sunset.

Side note: upgrading to a PLUS player gives you ability to share your solutions on a public URL.

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).

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!

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.

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!

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!

Versus lets you challenge your friends (or enemies) to a CSS duel, in a private one-on-one battle. In a Versus battle you define the rules of the match!

This is currently in Beta and locked for everyone. We're slowly unlocking it for a few players daily. Alternatively, if you get invited to play Versus battle, the feature unlocks for you too! 🎉

Becoming a PLUS player unlocks a whole bunch of new features:

• Play (and access their top solutions) all our past Daily Targets
• Access to code editor plugins
• See your advanced target stats
• Get a shiny PLUS badge in front of your name across the website
• A beautiful submissions count chart on your public profile page.
• Search across your top solutions
• Favourite and share solutions.
• Unlimited submission history
• VSCode editor

Read more about PLUS benefits here.