--- title: Creating a Fallout-Style UI Using Modern CSS | daily.dev description: Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers... canonical: https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Creating a Fallout-Style UI Using Modern CSS | daily.dev og:description: Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers... og:url: https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt og:image: https://api.daily.dev/og/posts/SLHY06VyT.png og:image:alt: Creating a Fallout-Style UI Using Modern CSS 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. # Creating a Fallout-Style UI Using Modern CSS **[Codemotion](https://daily.dev/sources/codemotion)** · 6 min read · 1073 upvotes · 50 comments ## Summary Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers semantic HTML, responsiveness, typography and colors, responsive layout, visual effects and animations, and using generative AI for sci-fi content. ## 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. **@poppernaut** · 6 upvotes > This is amazing! **@arnyarnymore** · 5 upvotes > can you do it with bansky's character? **@jackatdjl** · 5 upvotes > Looks Beautiful **@iescapedvim** · 4 upvotes > That looks awesome **@8kfps** · 3 upvotes > Wow That's beautiful ## 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 --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt) ```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":"Creating a Fallout-Style UI Using Modern CSS","url":"https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt"},"datePublished":"2024-06-11T10:02:54.017Z","dateModified":"2024-10-05T16:53:23.190Z","description":"Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/46726ed96ae8b26cdd1d69db81785974?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/46726ed96ae8b26cdd1d69db81785974?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Codemotion","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":"Organization","name":"Codemotion","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/008c4c0fe1ba4cd3b6a6740d442d242b","url":"https://daily.dev/sources/codemotion"},"commentCount":50,"discussionUrl":"https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1073},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":50}],"keywords":"webdev,css,ui-design","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codemotion","item":"https://daily.dev/sources/codemotion"},{"@type":"ListItem","position":3,"name":"Creating a Fallout-Style UI Using Modern CSS"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/creating-a-fallout-style-ui-using-modern-css-slhy06vyt","comment":[{"@type":"Comment","text":"This is amazing!","datePublished":"2024-06-11T10:18:08.342Z","url":"https://daily.dev/posts/SLHY06VyT#c-6OLJZiMQo","author":{"@type":"Person","name":"Popper","url":"https://daily.dev/poppernaut","image":"https://media.daily.dev/image/upload/v1680337154/avatars/avatar_oou697W4x2k094SIyGAls.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}},{"@type":"Comment","text":"can you do it with bansky’s character?","datePublished":"2024-06-11T15:36:33.763Z","url":"https://daily.dev/posts/SLHY06VyT#c-2Lefi6Iqq","author":{"@type":"Person","name":"arny","url":"https://daily.dev/arnyarnymore","image":"https://lh3.googleusercontent.com/a/ACg8ocIjepecNlBn2rsN4PYxXTSXoj1tFBnS-BhF3HXPewvPQ25UmFAA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Looks Beautiful","datePublished":"2024-06-11T18:57:57.538Z","url":"https://daily.dev/posts/SLHY06VyT#c-98hMNdzzm","author":{"@type":"Person","name":"Jack at DJL","url":"https://daily.dev/jackatdjl","image":"https://media.daily.dev/image/upload/s--x3jh5vSX--/f_auto/v1718132342/avatars/avatar_TzqmgDzll3f2yyGkld5UY"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"That looks awesome","datePublished":"2024-06-11T17:15:29.661Z","url":"https://daily.dev/posts/SLHY06VyT#c-owZfHRGRb","author":{"@type":"Person","name":"Yasir Rehman","url":"https://daily.dev/iescapedvim","image":"https://lh3.googleusercontent.com/a/ACg8ocILZ0ge6ciZ9yBBUtX0a4tBYzaPDj42pSM1U-ms9UGSvnwwa0_tFg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Wow That’s beautiful","datePublished":"2024-06-11T22:35:43.216Z","url":"https://daily.dev/posts/SLHY06VyT#c-B3UtWnBGO","author":{"@type":"Person","name":"8KFPS","url":"https://daily.dev/8kfps","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} ```