{"id":30123,"date":"2017-06-05T21:01:02","date_gmt":"2017-06-05T13:01:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30123"},"modified":"2018-04-09T16:52:12","modified_gmt":"2018-04-09T08:52:12","slug":"design-css-adobe-styles-editor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/","title":{"rendered":"Design CSS with This Adobe-Style Web App Editor"},"content":{"rendered":"

Adobe\u2019s software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels<\/strong> are the whole shebang with everything you need to build custom designs.<\/p>\n

And now, there\u2019s a free web app editor<\/strong>, called LayerStyles<\/a><\/strong>, which mimics the Photoshop layers editor right in your browser. It lets you dynamically generate CSS code<\/strong> as if you\u2019re working in Photoshop.<\/p>\n

Recommended Reading:<\/strong> 20 Free & Useful Photoshop Plugins All Designers Must Have<\/a><\/p>\n

\"LayerStyles<\/a><\/figure>\n

If you visit the builder page<\/a><\/strong> you can tinker with it to see how it works.<\/p>\n

The window comes with five different style panels<\/strong> that all mimic Photoshop. They follow the same settings and they update immediately<\/strong> with a demo box on the page.<\/p>\n

These are the panels you can pick from:<\/p>\n

    \n
  1. Drop Shadow<\/li>\n
  2. Inner Shadow<\/li>\n
  3. Background<\/li>\n
  4. Border<\/li>\n
  5. Border Radius<\/li>\n<\/ol>\n

    They all mimic the Adobe GUI which makes this tool so fun for designers. You also get the complete CSS code<\/strong>, generated for free.<\/p>\n

    Just click the lower-left corner box labeled \u201cCSS Code\u201d<\/strong> to get your snippet<\/strong>. It comes with all CSS3 properties for everything you\u2019ve selected.<\/p>\n

    And the best of all, this project is completely open source and free<\/strong> on GitHub<\/a> if you want to download a local copy. Not only can this be fun for generating CSS<\/strong>, but it\u2019s also a great way to learn how to build a web app<\/strong>.<\/p>\n

    The site uses a lot<\/em> of JavaScript libraries<\/strong>, along with jQuery plugins<\/strong>. It was built by developer Felix Niklas<\/a> who made this as a side project.<\/p>\n

    You can find plenty of code generators<\/strong> elsewhere but this one is truly unique. It\u2019s also the most fun and perhaps the coolest web app I\u2019ve seen so far this year.<\/p>\n

    \"LayerStyles<\/a><\/figure>\n

    Take a look at LayerStyles and see what you think. You can tinker with a live version<\/strong> on the demo page<\/a> and find all available source code<\/strong> for free on GitHub<\/a>.<\/p>\n

    Or, if you wanna spread thanks to the creator you can tweet your admirations @mrflix<\/a>.<\/p>\n

    Recommended Reading:<\/strong> 10 Best CSS Code Generators for Web Developers<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    Adobe\u2019s software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with everything you need to build custom designs. And now, there\u2019s a free web app editor, called LayerStyles, which mimics the Photoshop layers editor right in your browser. It lets you dynamically…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3029,507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nDesign CSS with This Adobe-Style Web App Editor - Hongkiat<\/title>\n<meta name=\"description\" content=\"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design CSS with This Adobe-Style Web App Editor\" \/>\n<meta property=\"og:description\" content=\"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-05T13:01:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:52:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Design CSS with This Adobe-Style Web App Editor\",\"datePublished\":\"2017-06-05T13:01:02+00:00\",\"dateModified\":\"2018-04-09T08:52:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/\"},\"wordCount\":348,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-css-adobe-styles-editor\\\/01-ps-layer-styles-css-generator.jpg\",\"keywords\":[\"Code Editors\",\"CSS\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/\",\"name\":\"Design CSS with This Adobe-Style Web App Editor - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-css-adobe-styles-editor\\\/01-ps-layer-styles-css-generator.jpg\",\"datePublished\":\"2017-06-05T13:01:02+00:00\",\"dateModified\":\"2018-04-09T08:52:12+00:00\",\"description\":\"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-css-adobe-styles-editor\\\/01-ps-layer-styles-css-generator.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-css-adobe-styles-editor\\\/01-ps-layer-styles-css-generator.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-css-adobe-styles-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design CSS with This Adobe-Style Web App Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design CSS with This Adobe-Style Web App Editor - Hongkiat","description":"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/","og_locale":"en_US","og_type":"article","og_title":"Design CSS with This Adobe-Style Web App Editor","og_description":"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with","og_url":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-05T13:01:02+00:00","article_modified_time":"2018-04-09T08:52:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Design CSS with This Adobe-Style Web App Editor","datePublished":"2017-06-05T13:01:02+00:00","dateModified":"2018-04-09T08:52:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/"},"wordCount":348,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg","keywords":["Code Editors","CSS"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/","url":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/","name":"Design CSS with This Adobe-Style Web App Editor - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg","datePublished":"2017-06-05T13:01:02+00:00","dateModified":"2018-04-09T08:52:12+00:00","description":"Adobe's software is world renowned by designers of all ages, but none more so than Photoshop. PhotoShop editing panels are the whole shebang with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-css-adobe-styles-editor\/01-ps-layer-styles-css-generator.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/design-css-adobe-styles-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Design CSS with This Adobe-Style Web App Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7PR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30123"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30123\/revisions"}],"predecessor-version":[{"id":42216,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30123\/revisions\/42216"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30123"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}