{"id":4905,"date":"2021-04-26T16:34:33","date_gmt":"2021-04-26T16:34:33","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=4905"},"modified":"2025-10-14T17:14:29","modified_gmt":"2025-10-14T17:14:29","slug":"neon-ui-design-inspiration","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/neon-ui-design-inspiration\/","title":{"rendered":"Neon UI Design &#8211; Inspiration &#038; tips"},"content":{"rendered":"\n<p>Neon colors and lights look so cool. If you&#8217;re passionate about futuristic interfaces like me you may enjoy these pieces of inspiration for neon UI design. <\/p>\n\n\n\n<p><strong>Credit to each designer is below every image.<\/strong><\/p>\n\n\n\n<p>Recommended: <a href=\"https:\/\/www.wendyzhou.se\/blog\/cyberpunk-ui-website-design-inspiration\/\">Cyberpunk UI Website Design Inspiration<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to incorporate neon elements<\/h2>\n\n\n\n<p>Since neon colors are super bright, and often look best on darker backgrounds, there are som common tricks that designers use. Some of these are&#8230;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use bright colors sparingly <\/li>\n\n\n\n<li>Use neon colors for highlighting elements (icons, buttons, graphs, special numbers)<\/li>\n\n\n\n<li>Create engaging illustrations with the bright colors and keep other elements dark<\/li>\n\n\n\n<li>Use a glow shadow on the neon elements (the shadow color is the same as the element, and then add blur and spread)<\/li>\n\n\n\n<li>Use gradients between different shades of one color, or between different ones<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mobile App Interfaces<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cyberpunk inspired neon UI design by <a href=\"https:\/\/dribbble.com\/shots\/15427958-Braindance-Courses-Cyberpunk\">Toma Li<\/a><\/li>\n\n\n\n<li>By <a href=\"https:\/\/dribbble.com\/shots\/14208596-Unity\">Dash<\/a> for UI8<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5591520-Travel-The-World\">Left Aligned<\/a> &#8211; A good example of how bright-colored illustrations stand out on the darker background.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/15498566-Electric-car-charger-app-concept\">Offriginal for Orizon<\/a> &#8211; High-fidelity mockup with neon colors and movement.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Desktop Interfaces<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/5451410-Game-Blog\">Aleksandro<\/a> &#8211; The bright colors are used to highlight the call-to-action button and the navigation menu to the left.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/12257456-Sales-Dashboard-Concept\">Michael<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/14777481-Home-Page-Concept-Design-Virtual-Bank-Website\">Awesomic<\/a> &#8211; Bright colors used to highlight words in the title.<\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/10474895-It-Leaders-Navy-Blue-Landing-Page\">Tomasz Osowski<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/6652263-X-Taon-Car-Landing-Page\">Tribhuvan<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Neon Assets<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.dribbble.com\/users\/1597244\/screenshots\/6642842\/loading.png\" alt=\"Neon UI Design Loading Graph Circle\"\/><figcaption class=\"wp-element-caption\">Neon gradient loading element by me (<a href=\"https:\/\/dribbble.com\/shots\/6642842-Loading-Dark-Mode-Gradients\">Wendy Zhou<\/a>)<\/figcaption><\/figure>\n\n\n\n<p>Glowy graphs and buttons in bright neon colors.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/9993801-Game-Menu-Dashboard-UI-Design\">Anton Olashyn<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/5854980-Crypto-Portfolio-Illustration\">Roman Klco<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neon colors and lights look so cool. If you&#8217;re passionate about futuristic interfaces like me you may enjoy these pieces of inspiration for neon UI design. <\/p>\n","protected":false},"author":1,"featured_media":4907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[175],"tags":[],"class_list":["post-4905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","entry","has-media"],"gutentor_comment":1,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration.png",1953,1156,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration-300x178.png",300,178,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration-768x455.png",768,455,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration-1024x606.png",1024,606,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration-1536x909.png",1536,909,true],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration.png",1953,1156,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration.png",600,355,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration.png",760,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/04\/Neon-UI-Design-Inspiration.png",1183,700,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":1,"uagb_excerpt":"Neon colors and lights look so cool. If you're passionate about futuristic interfaces like me you may enjoy these pieces of inspiration for neon UI design.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=4905"}],"version-history":[{"count":6,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4905\/revisions"}],"predecessor-version":[{"id":7849,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4905\/revisions\/7849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/4907"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=4905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=4905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=4905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}