Lisbon Tiles Playground

Client: Etic Webdevelopment Course
Date: Jan 18, 2018
Services: Web Design, JS, HTML, CSS


What’s your passion?

This was my first project for the Webdevelopment Course in ETIC School in Lisbon. The goal was to create a website about a passion, using what I had learned of Javascript, HTML and CSS in three months of classes. As I had recently moved to Portugal, I was in love with the beautiful tiles of the Lisbon buildings and houses.


Lisbon Tiles

My idea was to mix tradition and modernity, creating a website that was all about an ancient Portuguese technique but also followed some of the latest trends in Web Design.


Sharing ideas

One thing I love about the developer community is the collaborative spirit. Many times I used Open Source projects to enhance my layouts and this was my turn to give something back to the world.



While searching what has been done online about tiles I could found mainly 3 kinds of websites


Lisbon Tiles Playground

A free collection of repeatable SVG background patterns based on amazing Lisbon tiles and their cool history

Tiles Editor

Playground Tool

Using this tool, you can create your own Lisbon Tiles background, with customized colors and proportions. The tool run JavaScript to manipulate fill colors, background, and size of each tile.

Generated CSS

After editing your tiles background you can generate a code or download the svg


The code copied by the user can be inserted in any website

History Pages

About each Tile

All the tiles patterns are attached to a page telling their history and where they can be found in the city of Lisbon. This way, users can find their pattern in the real world.

Contribution Page

Submit your Tile

Anyone can share a Lisbon Tile SVG with the public, by submitting it to Lisbon Tiles Playground.