--- title: CSS Tricks to Create that Dark Futuristic Web3 Look description: The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you... canonical: https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Tricks to Create that Dark Futuristic Web3 Look | daily.dev og:description: The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you... og:url: https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig og:image: https://api.daily.dev/og/posts/vbI5cpMIG.png og:image:alt: CSS Tricks to Create that Dark Futuristic Web3 Look og:image:width: 1200 og:image:height: 630 og:locale: en --- [Hashnode](https://daily.dev/sources/hashnode) [Read post](https://api.daily.dev/r/vbI5cpMIG) # [CSS Tricks to Create that Dark Futuristic Web3 Look](https://api.daily.dev/r/vbI5cpMIG "Go to post") The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you can add to your app:Gradient Glowing effect Bright and white text over a dark background Semi transparent backgrounds A quick and easy transition on hover. [#css](/tags/css "Check all #css posts")[#web3](/tags/web3 "Check all #web3 posts") Mar 01, 2022 • 5m read time • From [trishalim.hashnode.dev](https://api.daily.dev/r/vbI5cpMIG "trishalim.hashnode.dev") [](https://api.daily.dev/r/vbI5cpMIG "Go to post") Table of contents [Text styles to create the web3 look](https://api.daily.dev/r/vbI5cpMIG?a=heading-text-styles-to-create-the-web3-look "Text styles to create the web3 look")[ Button styles to create the web3 look](https://api.daily.dev/r/vbI5cpMIG?a=heading-button-styles-to-create-the-web3-look "Button styles to create the web3 look")[ Blurred Backgrounds to create the web3 look](https://api.daily.dev/r/vbI5cpMIG?a=heading-blurred-backgrounds-to-create-the-web3-look "Blurred Backgrounds to create the web3 look") 148 Upvotes8 Comments Comment Bookmark Copy Share your thoughts Post [](https://daily.dev/sources/hashnode) [Hashnode](https://daily.dev/sources/hashnode "https://daily.dev/sources/hashnode") Hashnode is a community-driven platform for developers to share knowledge, ask questions, and connec... Read more 191 Followers • 14 Upvotes [](https://daily.dev/trishalim) [Trisha Lim](https://daily.dev/trishalim) [@trishalim](https://daily.dev/trishalim) Joined Mar 13\. 2022 10 #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends 148 8 ```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":"CSS Tricks to Create that Dark Futuristic Web3 Look","url":"https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig"},"datePublished":"2022-03-01T09:33:50.385Z","dateModified":"2022-03-18T06:47:22.078Z","description":"The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec2ea251857285cf8ed08207d0e3c28f","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec2ea251857285cf8ed08207d0e3c28f","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":"Trisha Lim","url":"https://daily.dev/trishalim","image":"https://avatars.githubusercontent.com/u/13136861?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":10}},"commentCount":8,"discussionUrl":"https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":148},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"keywords":"css,web3","timeRequired":"PT5M"} {"@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":"CSS Tricks to Create that Dark Futuristic Web3 Look"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-tricks-to-create-that-dark-futuristic-web3-look-vbi5cpmig","comment":[{"@type":"Comment","text":"These styles just come and go in cycles almost like clothing fashion now.","datePublished":"2022-03-01T22:06:42.191Z","url":"https://daily.dev/posts/vbI5cpMIG#c-VPRzcl-IW","author":{"@type":"Person","name":"Dean Lofts","url":"https://daily.dev/loftwah","image":"https://avatars.githubusercontent.com/u/19922556?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"great, thanks","datePublished":"2022-03-02T07:50:01.081Z","url":"https://daily.dev/posts/vbI5cpMIG#c-u6WpAz2RT","author":{"@type":"Person","name":"ido barnea","url":"https://daily.dev/barbareshet","image":"https://avatars2.githubusercontent.com/u/12647463?v=4"}},{"@type":"Comment","text":"Beautiful and very helpful !","datePublished":"2022-03-07T13:16:10.513Z","url":"https://daily.dev/posts/vbI5cpMIG#c-I4X4Zp4b3","author":{"@type":"Person","name":"BrightDV","url":"https://daily.dev/brightdv","image":"https://avatars.githubusercontent.com/u/92821484?v=4"}},{"@type":"Comment","text":"Wow! awesome tricks to put them into practice. Thank you.","datePublished":"2022-03-08T08:32:12.671Z","url":"https://daily.dev/posts/vbI5cpMIG#c-0kY75Q27-","author":{"@type":"Person","name":"Lenin Carrion","url":"https://daily.dev/lenincarrion","image":"https://lh3.googleusercontent.com/a-/AOh14GikR-3HedB_2S2rLp4JCFP0TDn8dkaRqOdgtLIIcA=s100"}},{"@type":"Comment","text":"Up and up","datePublished":"2022-03-01T23:44:04.025Z","url":"https://daily.dev/posts/vbI5cpMIG#c-p7TRotas8","author":{"@type":"Person","name":"An Do","url":"https://daily.dev/jasonanger","image":"https://avatars.githubusercontent.com/u/42490796?v=4"}}]} ```