--- title: How I make CSS Art | daily.dev description: On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until... canonical: https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How I make CSS Art | daily.dev og:description: On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until... og:url: https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8 og:image: https://api.daily.dev/og/posts/4SBcF6-c8.png og:image:alt: How I make CSS Art og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How I make CSS Art **[Hashnode](https://daily.dev/sources/hashnode)** · [@yosracodes](https://daily.dev/yosracodes) · 9 min read · 101 upvotes · 16 comments ## Summary On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until publishing the art on codepen. Hopefully, this will attract more people into creating CSS art and have fun with it. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@thetecguy** · 3 upvotes > This is a really cool article on how to tackle such a task. Keep up the good work! **@gianlu90** · 2 upvotes > thanks, very interesting and good job! **@itsmnthn** · 2 upvotes > Great One **@daribock** · 1 upvotes > Really nice art style **@rainbowwave** · 1 upvotes > awsmm work ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How I make CSS Art","url":"https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8"},"datePublished":"2021-09-27T04:00:09.022Z","dateModified":"2021-10-07T14:17:10.317Z","description":"On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2d127e41a723abcd6bfa294789e155eb","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2d127e41a723abcd6bfa294789e155eb","isAccessibleForFree":true,"articleSection":"Hashnode","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Yosra Emad","url":"https://daily.dev/yosracodes","image":"https://media.daily.dev/image/upload/s--cJwKrTrP--/f_auto/v1749567027/avatars/avatar_NLLmZpgwYd?_a=BAMClqUq0","description":"Lover of the art of building things","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":230}},"commentCount":16,"discussionUrl":"https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":101},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":16}],"keywords":"css","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":3,"name":"How I make CSS Art"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8","comment":[{"@type":"Comment","text":"This is a really cool article on how to tackle such a task. Keep up the good work!","datePublished":"2021-09-27T07:08:15.826Z","url":"https://daily.dev/posts/4SBcF6-c8#c-Ovy96Y4oN","author":{"@type":"Person","name":"Joachim Klug","url":"https://daily.dev/thetecguy","image":"https://avatars.githubusercontent.com/u/36903205?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"thanks, very interesting and good job!","datePublished":"2021-09-27T07:12:15.964Z","url":"https://daily.dev/posts/4SBcF6-c8#c-IzizGOaCs","author":{"@type":"Person","name":"Gianluca Bianchini","url":"https://daily.dev/gianlu90","image":"https://media.daily.dev/image/upload/f_auto/v1617263180/avatars/lelfs0peu"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Great One","datePublished":"2021-09-27T12:11:22.818Z","url":"https://daily.dev/posts/4SBcF6-c8#c-TfmXU8ptC","author":{"@type":"Person","name":"Manthankumar Satani","url":"https://daily.dev/itsmnthn","image":"https://media.daily.dev/image/upload/s--XpFWj1ND--/f_auto/v1749054653/avatars/avatar_iBTDQoV5Y?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Really nice art style","datePublished":"2021-09-27T13:08:32.752Z","url":"https://daily.dev/posts/4SBcF6-c8#c-hGoQClMPO","author":{"@type":"Person","name":"Darius Bock","url":"https://daily.dev/daribock","image":"https://lh3.googleusercontent.com/a-/AOh14GjwIyAJDwE4EQDXHU-Xt0p1lGoQt27B9p3P0DRVXQ=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"awsmm work","datePublished":"2021-09-27T15:46:47.696Z","url":"https://daily.dev/posts/4SBcF6-c8#c-WRSy9Ji63","author":{"@type":"Person","name":"Foenex J","url":"https://daily.dev/rainbowwave","image":"https://lh3.googleusercontent.com/a/AATXAJy9Eb50Z0p1gyJ1Ewft1GcT65taYSL3R4EDxLZz=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```