{"id":355,"date":"2014-06-09T22:22:56","date_gmt":"2014-06-09T22:22:56","guid":{"rendered":"http:\/\/blog.psd2htmlconverter.com\/en\/?p=355"},"modified":"2016-01-21T00:04:23","modified_gmt":"2016-01-21T00:04:23","slug":"generation-of-linear-and-radial-gradients-in-svg-format","status":"publish","type":"post","link":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/","title":{"rendered":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers"},"content":{"rendered":"<p><a href=\"\/\/psd2htmlconverter.com\/en\/\">Service of automated PSD to HTML conversion<\/a> used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding.<!--more--><\/p>\n<p>Example of CSS code for linear gradient:<\/p>\n<pre>background: url(data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9InJvdW5kZWRfcmVjdGFuZ2xlXzMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYWQwMDUxIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iOTkuNTElIiBzdG9wLWNvbG9yPSIjYzM2NTAwIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzNjUwMCIgc3RvcC1vcGFjaXR5PSIwLjU2IiAvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3JvdW5kZWRfcmVjdGFuZ2xlXzMpIiAvPjwvc3ZnPg==), #ff007d;\r\nbackground: -moz-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;\r\nbackground: -o-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;\r\nbackground: -webkit-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;\r\nbackground: linear-gradient(180deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;\r\n<\/pre>\n<p>Example of CSS code for radial gradient:<\/p>\n<pre class=\"\">background: url(data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMzIgMTM3IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCjxyYWRpYWxHcmFkaWVudCBpZD0icm91bmRlZF9yZWN0YW5nbGVfNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjM0LjI1JSI+DQo8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCjxzdG9wIG9mZnNldD0iNTAuMzklIiBzdG9wLWNvbG9yPSIjMTFmZjMzIiBzdG9wLW9wYWNpdHk9IjAiIC8+DQo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41IiAvPg0KPC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjMyIiBoZWlnaHQ9IjEzNyIgZmlsbD0idXJsKCNyb3VuZGVkX3JlY3RhbmdsZV82KSIgLz48L3N2Zz4=), #ff008a;\r\nbackground: -moz-radial-gradient(center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;\r\nbackground: -o-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;\r\nbackground: -webkit-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;\r\nbackground: -ms-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;\r\nbackground: radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;\r\n<\/pre>\n<p>In this way out <a href=\"\/\/psd2htmlconverter.com\/en\/\">Photoshop to HTML software<\/a> provides compatibility with the IE9 browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1,5],"tags":[],"class_list":["post-355","post","type-post","status-publish","format-standard","hentry","category-all","category-new"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:\" \/>\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"Alex\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Blog about automated Photoshop to HTML\/CSS conversion | Blog of Psd 2 Html Converter developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion\" \/>\n\t\t<meta property=\"og:description\" content=\"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2014-06-09T22:22:56+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2016-01-21T00:04:23+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#article\",\"name\":\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\\\/CSS conversion\",\"headline\":\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers\",\"author\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/author\\\/alex\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/#organization\"},\"datePublished\":\"2014-06-09T22:22:56+00:00\",\"dateModified\":\"2016-01-21T00:04:23+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#webpage\"},\"articleSection\":\"All, New!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/category\\\/all\\\/#listItem\",\"name\":\"All\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/category\\\/all\\\/#listItem\",\"position\":2,\"name\":\"All\",\"item\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/category\\\/all\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#listItem\",\"name\":\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#listItem\",\"position\":3,\"name\":\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/category\\\/all\\\/#listItem\",\"name\":\"All\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/#organization\",\"name\":\"Blog about automated Photoshop to HTML\\\/CSS conversion\",\"description\":\"Blog of Psd 2 Html Converter developers\",\"url\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/author\\\/alex\\\/#author\",\"url\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/author\\\/alex\\\/\",\"name\":\"Alex\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f6116c23917d8b63930c77aa8efb6f4e9ac316b3f56904aacfd5ab3e7432fcae?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Alex\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#webpage\",\"url\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/\",\"name\":\"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\\\/CSS conversion\",\"description\":\"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/2014\\\/06\\\/09\\\/generation-of-linear-and-radial-gradients-in-svg-format\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/author\\\/alex\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/author\\\/alex\\\/#author\"},\"datePublished\":\"2014-06-09T22:22:56+00:00\",\"dateModified\":\"2016-01-21T00:04:23+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/\",\"name\":\"Blog about automated Photoshop to HTML\\\/CSS conversion\",\"description\":\"Blog of Psd 2 Html Converter developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.psd2htmlconverter.com\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion","description":"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:","canonical_url":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#article","name":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion","headline":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers","author":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/author\/alex\/#author"},"publisher":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/#organization"},"datePublished":"2014-06-09T22:22:56+00:00","dateModified":"2016-01-21T00:04:23+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#webpage"},"isPartOf":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#webpage"},"articleSection":"All, New!"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en#listItem","position":1,"name":"Home","item":"https:\/\/blog.psd2htmlconverter.com\/en","nextItem":{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/#listItem","name":"All"}},{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/#listItem","position":2,"name":"All","item":"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/","nextItem":{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#listItem","name":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers"},"previousItem":{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#listItem","position":3,"name":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers","previousItem":{"@type":"ListItem","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/#listItem","name":"All"}}]},{"@type":"Organization","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/#organization","name":"Blog about automated Photoshop to HTML\/CSS conversion","description":"Blog of Psd 2 Html Converter developers","url":"https:\/\/blog.psd2htmlconverter.com\/en\/"},{"@type":"Person","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/author\/alex\/#author","url":"https:\/\/blog.psd2htmlconverter.com\/en\/author\/alex\/","name":"Alex","image":{"@type":"ImageObject","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/f6116c23917d8b63930c77aa8efb6f4e9ac316b3f56904aacfd5ab3e7432fcae?s=96&d=mm&r=g","width":96,"height":96,"caption":"Alex"}},{"@type":"WebPage","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#webpage","url":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/","name":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion","description":"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/#breadcrumblist"},"author":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/author\/alex\/#author"},"creator":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/author\/alex\/#author"},"datePublished":"2014-06-09T22:22:56+00:00","dateModified":"2016-01-21T00:04:23+00:00"},{"@type":"WebSite","@id":"https:\/\/blog.psd2htmlconverter.com\/en\/#website","url":"https:\/\/blog.psd2htmlconverter.com\/en\/","name":"Blog about automated Photoshop to HTML\/CSS conversion","description":"Blog of Psd 2 Html Converter developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/blog.psd2htmlconverter.com\/en\/#organization"}}]},"og:locale":"en_US","og:site_name":"Blog about automated Photoshop to HTML\/CSS conversion | Blog of Psd 2 Html Converter developers","og:type":"article","og:title":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion","og:description":"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:","og:url":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/","article:published_time":"2014-06-09T22:22:56+00:00","article:modified_time":"2016-01-21T00:04:23+00:00","twitter:card":"summary_large_image","twitter:title":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers | Blog about automated Photoshop to HTML\/CSS conversion","twitter:description":"Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding. Example of CSS code for linear gradient: background:"},"aioseo_meta_data":{"post_id":"355","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2025-02-08 12:06:48","updated":"2025-06-04 00:59:57","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/blog.psd2htmlconverter.com\/en\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/\" title=\"All\">All<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tAutomatic generation of linear and radial gradients in SVG format from Photoshop layers\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/blog.psd2htmlconverter.com\/en"},{"label":"All","link":"https:\/\/blog.psd2htmlconverter.com\/en\/category\/all\/"},{"label":"Automatic generation of linear and radial gradients in SVG format from Photoshop layers","link":"https:\/\/blog.psd2htmlconverter.com\/en\/2014\/06\/09\/generation-of-linear-and-radial-gradients-in-svg-format\/"}],"_links":{"self":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":3,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":488,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/355\/revisions\/488"}],"wp:attachment":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}