CSSoccer Jerseys

This is just an experiment that aims to recreate the design of several soccer jerseys using CSS background gradients and blend modes. Tested in the last version of Google Chrome, no guarantees on other browsers.

• All jersey designs and shading must be generated via CSS
• Use CSS only, no JS (JS just for showing team names in this demo)
• Use only 1 DIV per jersey (additional elements just for showing team names via JS)
• Use SVG just for shape masking. No color, shade or effect applied
• Don't load external resources
• Don't use images or background images
• Don't use type

Try it out

Install NPM packages

npm install

To start Gulp dev server

npm run code

To build static version

npm run build