STYLE GUIDE

FOR GAMES AND PROFILES

{ 'background': 'linear-gradient(20deg, #000, #304e59)', 'color': '#529ebb', 'border': '2px solid #2f4d58' }

Hi! You are here probably because you want the best profile or game page around, so let me introduce you to the JSON styling that the web uses to customize user content.

The first thing you need to know is CSS. If you don't know anything about it, check this link and start learning!

Second thing you need to do is convert that CSS to JSON, this way:

Hi! I'm a text.

{ 'key': 'value', 'key': 'value' }

Where 'key' means the key of the CSS property, and 'value' means the value of that property, for example: 'background': 'black'.

And the last thing to do is being creative! Use your brain and create amazing things, cool colors, complex gradients, background images... Whatever you want!

Note: Please understand that some CSS properties like 'height' or 'position' are banned due to its facility to make a ugly page, and you don't want to see a ugly page, right?

PLAYGROUND

If you need to practice, or you just want to create something from scratch, here you have this live CSS-JSON playground to try whatever you want.

This text is cool.

EXAMPLES

Feel free to use those examples wherever you want!

BASIC EXAMPLES

{ 'background': 'linear-gradient(180deg, pink, #cc5b90)', 'color': '#fff', 'border': '2px solid #cc5b90', 'border-radius': '10px', 'text-shadow': '0px 0px 5px black '}

Cotton candy

{ 'background': '#000', 'color': '#fff', 'border': '1px solid #fff', 'font-family': 'monospace' }

Console_

{ 'background': 'linear-gradient(#6f6f6f, transparent)', 'color': '#fff', 'border-radius': '20px 20px 0px 0px'}

Ghost

{ 'background': 'radial-gradient(circle at left, #3c849f, #0c5275 50%) '}

Sea

ADVANCED EXAMPLES

Note: Those examples may not work in some web browsers.

{ 'background': '#614402', 'color': '#ffc400', 'border': '1px solid', 'background-image': 'url(https://raccreative.s3.eu-central-1.amazonaws.com/media/hologram.png)', 'text-shadow': '0px 0px 10px orange '}

Forget about libertyman

{ 'background': 'radial-gradient( ellipse farthest-corner at right bottom, #fedb37 0%, #fdb931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80% ), radial-gradient( ellipse farthest-corner at left top, #fff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100% )', 'color': '#000', 'border': '2px solid #685324' }

Gold

{ 'background': 'radial-gradient(circle at top left, green, #0c310b)', 'color': '#2cff00', 'border': '2px solid #6a6', 'box-shadow': '0px 0px 30px lime' }

Toxic

{ 'background': '#a0a0a026', 'border': '1px solid #393939', 'box-shadow': 'inset 0px 0px 8px black', 'backdrop-filter': 'blur(10px)' }

backdrop filter

{ 'background': 'linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent)', 'color': '#fff', 'background-blend-mode': 'screen' }

Spectrum

{ 'background': 'linear-gradient(20deg, red, purple)', 'border': '2px solid #c6003a', 'box-shadow': '0px 0px 20px red', 'font-weight': '700', 'text-transform': 'uppercase', 'color': 'transparent', 'background-clip': 'text', 'text-shadow': '3px 3px 1px #f700e85e' }

I don't know how to name this style but it is pretty cool right?

Engines