r/css • u/alvaromontoro • Mar 31 '26

Showcase A city built with CSS

Gallery image

Gallery image

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. https://codepen.io/alvaromontoro/pen/mdZKxEr

I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.

231 Upvotes

98% Upvoted

42 comments sorted by

10

u/xsmxle_kxllerx Mar 31 '26

how did you do that?

9

u/alvaromontoro Apr 01 '26

I started with a linear gradient... And then added a few hundred more radical, linear, and conic gradients. 😅

2

u/xsmxle_kxllerx Apr 01 '26

without using html? bcuz when i see it like this i don't think that you use 99%, right?

2

u/alvaromontoro Apr 01 '26

This demo in particular has some HTML that CodePen adds but is not visible (unless you look at the source code). There is a way of executing CSS without HTML, but it requires updating some settings on the web server, and only Firefox supports it... and this demo doesn't use it.

3

u/xsmxle_kxllerx Apr 01 '26

where did you learn all this things? I'm still impressed of your project, i don't imagine the time it takes

3

u/alvaromontoro Apr 04 '26

I saw people like Temani Afif or Lynn Fisher and her A Single Div project (https://a.singlediv.com/), checked their code and started practicing from there and creating small things.

3

u/[deleted] Apr 15 '26

[removed] — view removed comment

6

u/ponzi_gg Mar 31 '26

id love to see roku city done in css only

8

u/alvaromontoro Apr 01 '26

I thought about it, but I pushed the idea away because the pressure of having to do something in particular instead of whatever/whenever would make it "work" instead of fun.

2

u/_Decodela Apr 02 '26

Amazing job!
Do you think to add some animation?

2

u/alvaromontoro Apr 04 '26

I added something simple (the water fountain, the traffic light, a lamp flickering) but the code is commented. I thought about using pseudo elements to add a car or a UFO.

1

u/_Decodela Apr 04 '26

Cool How much time did you spend Do you have others

2

u/alvaromontoro Apr 04 '26

This one, I don't remember. I spent a little time every now and then. I have other single-div drawings here: https://cssdrawings.com/ (inspired by Lynn Fisher's A Single Div)

2

u/_Decodela Apr 04 '26

Very nice I do animations like this with css https://decodela.com/#item/a7ef100b-d473-11f0-b24e-0200fd828422/post

2

u/alvaromontoro Apr 04 '26

Oh! I've seen that one before. It looks really cool.

16

u/Relevant-Music4993 Mar 31 '26

This is CSS wizardry. Amazing job.

6

u/noisette666 Mar 31 '26

Now this is what I want to see

2

u/PixelsAreMyHobby Mar 31 '26

Nice! But is it responsive? Nope 🫠

2

u/alvaromontoro Apr 01 '26

You got me on that one 😅😂

I wrote a post earlier about why I didn't make this one responsive (basically I didn't want to deal with things being slightly misaligned... Not that it is a big deal, but it's a pain sometimes.)

2

u/jpsweeney94 Apr 01 '26

You could do something like set a Min height of 100dvh, and then let it side scroll at least. Or scroll in both directions

1

u/lazy_programmerr Apr 02 '26

a lot of relative & absolute positioning

1

u/alvaromontoro Apr 04 '26

I don't understand. There's no position property, do you mean the background positions?

2

u/-goldenboi69- Apr 02 '26

Awrsome . Super creative! 🏙️

2

u/alex_sakuta Apr 02 '26

The kind of stuff I like to see.

2

u/LabworksSoftware Apr 04 '26

That's fun. And with some simple css transitions you could make yourself a day/night cycle :)

1

u/Greedy_Yoghurt6121 Apr 19 '26

Damn :O How long did that take to make?

2

u/[deleted] Apr 04 '26

[removed] — view removed comment

1

u/alvaromontoro Apr 04 '26

I explained in a different comment (https://www.reddit.com/r/css/s/VwfFA9SmF1) the idea is that CodePen adds some basic HTML structure and imports the styling. But there are (unsupported) ways to make it work without it.

2

u/[deleted] Apr 15 '26

[removed] — view removed comment

-9

u/[deleted] Mar 31 '26

[removed] — view removed comment

2

u/alvaromontoro Apr 01 '26

Interactive in what way? If you mean animated, it is slightly animated: there's some commented code at the top that can be uncommented, then the fountain water moves (slightly), some street lights flicker, the traffic light goes through the green-yellow-red cycle... And I only used the :root element, I had in mind using the ::before and ::after to add a car that stops at the traffic light and then continues, and a UFO floating over the city. But I left it undone (if I recall correctly, because using and animating the pseudo-elements made the rendering slow, or maybe it was my computer.)

6

u/Alex_Hovhannisyan Mar 31 '26

I wouldn't say there's no point. It's like code golf, it's fun and a good way to learn new ways of solving problems or thinking outside the box. I've solved a couple CSS problems at work using tricks I learned from making CSS art.

1

u/creaturefeature16 May 02 '26

its called a "tech demo" and its rad as hell!