{"id":74301,"date":"2020-01-17T12:11:19","date_gmt":"2020-01-17T06:41:19","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74301"},"modified":"2024-04-12T14:23:25","modified_gmt":"2024-04-12T08:53:25","slug":"gradient-backgrounds-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/","title":{"rendered":"Gradient Backgrounds"},"content":{"rendered":"<p>Other than solid background colors or background images CSS can also be used to apply gradient backgrounds. An image gradient is a directional change in the intensity or color in an image either horizontally or vertically or in both directions. An gradient image is shown as<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64248\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png\" alt=\"Gradient Backgrounds\" width=\"183\" height=\"275\"><\/p>\n<p>There are different types of gradient, but a linear gradient of two colors from top to bottom is explained. The gradient image is usually low in size and usually the image is tiled horizontally or vertically or both.<\/p>\n<p>Using the repeat attribute and giving it a value of repeat-x causes the image to span left to right across the specified element. This example adds a gradient background to the paragraph element as<\/p>\n<p>p {<\/p>\n<p>background-image: url(http:\/\/www.example.com\/gradient.gif);<\/p>\n<p>background-repeat: repeat-x;<\/p>\n<p>}<\/p>\n<p>The example image is shown as<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64250\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-2-1.png\" alt=\"Gradient Backgrounds 2\" width=\"503\" height=\"160\"><\/p>\n<p>Different browsers now also have different declarations as<\/p>\n<table width=\"360\">\n<tbody>\n<tr>\n<td width=\"70\"><strong>Value<\/strong><\/td>\n<td width=\"290\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"70\">Mozilla<\/td>\n<td width=\"290\">background-image: -moz-linear-gradient( );<\/td>\n<\/tr>\n<tr>\n<td width=\"70\">Webkit<\/td>\n<td width=\"290\">background-image: -webkit-gradient();<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n<p>Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Other than solid background colors or background images CSS can also be used to apply gradient backgrounds. An image gradient is a directional change in the intensity or color in an image either horizontally or vertically or in both directions. An gradient image is shown as There are different types of gradient, but a linear&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1857],"class_list":["post-74301","page","type-page","status-publish","hentry","category-css3","tag-gradient-backgrounds"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gradient Backgrounds - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gradient Backgrounds - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Other than solid background colors or background images CSS can also be used to apply gradient backgrounds. An image gradient is a directional change in the intensity or color in an image either horizontally or vertically or in both directions. An gradient image is shown as There are different types of gradient, but a linear...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:25+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/\",\"name\":\"Gradient Backgrounds - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png\",\"datePublished\":\"2020-01-17T06:41:19+00:00\",\"dateModified\":\"2024-04-12T08:53:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gradient Backgrounds\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gradient Backgrounds - Tutorial","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.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/","og_locale":"en_US","og_type":"article","og_title":"Gradient Backgrounds - Tutorial","og_description":"Other than solid background colors or background images CSS can also be used to apply gradient backgrounds. An image gradient is a directional change in the intensity or color in an image either horizontally or vertically or in both directions. An gradient image is shown as There are different types of gradient, but a linear...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:25+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/","name":"Gradient Backgrounds - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png","datePublished":"2020-01-17T06:41:19+00:00","dateModified":"2024-04-12T08:53:25+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Gradient-Backgrounds-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/gradient-backgrounds-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Gradient Backgrounds"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74301"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74301\/revisions"}],"predecessor-version":[{"id":85723,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74301\/revisions\/85723"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}