{"id":15571,"date":"2012-11-28T21:01:20","date_gmt":"2012-11-28T13:01:20","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15571"},"modified":"2024-04-04T01:43:13","modified_gmt":"2024-04-03T17:43:13","slug":"css3-repeating-gradients","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/","title":{"rendered":"Mastering CSS3 Repeating Gradients"},"content":{"rendered":"<p>Many <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3 features<\/a> revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using images. Now, we can achieve superior effects solely through CSS.<\/p>\n<p>In earlier discussions, we delved into two main gradient types achievable with CSS3:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/\">Radial<\/a><\/strong> and<\/li>\n<li><strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">Linear<\/a> Gradients<\/strong>.<\/li>\n<\/ul>\n<p>Now, let\u2019s explore another variant: <strong>repeating gradients<\/strong>.<\/p>\n<h2>Exploring the Basics of Repeating Gradients<\/h2>\n<p><strong>Repeating Gradients<\/strong> serve as an extension to the gradient family. Their syntax echoes that of Radial and Linear gradients but, as their name suggests, they introduce a repeating pattern of colors in a specific direction. For repeating linear gradients, the function <code>repeating-linear-gradient<\/code> is used, and for radial or elliptical gradients, <code>repeating-radial-gradient<\/code> comes into play.<\/p>\n<pre>\r\n\/* Linear *\/\r\n.gradient {\r\n  background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px); \r\n}\r\n\r\n\/* Radial *\/\r\n.gradient {\r\n  background: repeating-radial-gradient(circle at 50% 50%, #f9f9f9, #cccccc 20px); \r\n}\r\n<\/pre>\n<p>The core difference lies in the <strong>repetition of colors<\/strong>. Below is a visual representation to help understand how color repetition operates.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg\" alt=\"Illustration of repeating linear gradient\" width=\"500\" height=\"450\"><\/figure>\n<p>While the image mainly showcases repeating linear gradients, the principle equally applies to radial gradients where colors infinitely repeat, regardless of direction. Check out the demo through the link below to see it in action.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css3-repeating-gradients\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a><\/p>\n<p>Next, we\u2019ll demonstrate practical applications of CSS3 Repeating Gradients in web design.<\/p>\n<h2>Creating Patterns with Repeating Gradients<\/h2>\n<p>A popular use for <strong>Repeating Gradients<\/strong> is creating background patterns. Here, we\u2019ll create a straightforward vertical stripe pattern.<\/p>\n<pre>\r\n.gradient {\r\n  background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);\r\n}\r\n<\/pre>\n<p>Observe how we position two distinct colors \u2013 <code>#f9f9f9<\/code> and <code>#cccccc<\/code> \u2013 at the exact location, <code>20px<\/code>. This technique accentuates the contrast between these colors, creating a clear, crisp distinction.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-gradients-patterns.jpg\" alt=\"Example of repeating gradient patterns\" width=\"500\" height=\"280\"><\/figure>\n<p>To alter the pattern\u2019s orientation, we adjust the angle \u2013 <code>90deg<\/code> for horizontal stripes, <code>45deg<\/code> for diagonal stripes, and so forth.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css3-repeating-gradients\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a><\/p>\n<h2>Creating a Notebook Paperline Effect<\/h2>\n<p>In this example, we\u2019ll create a notebook-style paperline, commonly found in physical notebooks, using only a <code>div<\/code> and CSS, no images required.<\/p>\n<pre>\r\n.gradient {\r\n  width: auto;\r\n  height: 500px;\r\n  margin: 0 50px;\r\n  background: -webkit-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);\r\n  background: -moz-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);\r\n  background: -o-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);\r\n  background: repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);\r\n  background-size: 100% 21px;\r\n}\r\n<\/pre>\n<p>We\u2019ve also utilized the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-background\/#the-background-size\">CSS3 <code>background-size<\/code><\/a> property to define the dimensions of the background \u2018image\u2019 as <strong>100%, 21px<\/strong>. Even though gradients display colors, they are treated as images, <strong>not colors<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/the-paper.jpg\" alt=\"Notebook paper effect\" width=\"500\" height=\"280\"><\/figure>\n<p>Next, we will introduce a stripe on the left edge using the <strong>:before<\/strong> <code>pseudo-element<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/the-paper-left-line.jpg\" alt=\"Notebook paper with left stripe\" width=\"500\" height=\"280\"><\/figure>\n<pre>\r\n.gradient:before {\r\n  content: \"\";\r\n  display: inline-block;\r\n  height: 500px;\r\n  width: 4px;\r\n  border-left: 4px double #FCA1A1;\r\n  position: relative;\r\n  left: 30px;\r\n}\r\n<\/pre>\n<p>And that\u2019s it \u2013 a straightforward process, right? Now, let\u2019s see everything in action through the links below.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css3-repeating-gradients\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/css3-repeating-gradients\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source<\/span><\/a><\/p>\n<h2>Further Resources<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webkit.org\/blog\/1424\/css3-gradients\/\">Webkit CSS3 Gradients<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/previous-versions\/windows\/internet-explorer\/ie-developer\/dev-guides\/hh673532(v=vs.85)?redirectedfrom=MSDN\">CSS3 Gradients at Microsoft Developer Network<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using images. Now, we can achieve superior effects solely through CSS. In earlier discussions, we delved into two main gradient types achievable with CSS3: Radial and Linear Gradients. Now, let\u2019s explore another variant: repeating&hellip;<\/p>\n","protected":false},"author":113,"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":[507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mastering CSS3 Repeating Gradients - Hongkiat<\/title>\n<meta name=\"description\" content=\"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using\" \/>\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\/css3-repeating-gradients\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering CSS3 Repeating Gradients\" \/>\n<meta property=\"og:description\" content=\"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/\" \/>\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=\"2012-11-28T13:01:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T17:43:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Mastering CSS3 Repeating Gradients\",\"datePublished\":\"2012-11-28T13:01:20+00:00\",\"dateModified\":\"2024-04-03T17:43:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/\"},\"wordCount\":471,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-repeating-gradients\\\/repeating-linear-gradients.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/\",\"name\":\"Mastering CSS3 Repeating Gradients - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-repeating-gradients\\\/repeating-linear-gradients.jpg\",\"datePublished\":\"2012-11-28T13:01:20+00:00\",\"dateModified\":\"2024-04-03T17:43:13+00:00\",\"description\":\"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-repeating-gradients\\\/repeating-linear-gradients.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-repeating-gradients\\\/repeating-linear-gradients.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-repeating-gradients\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering CSS3 Repeating Gradients\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering CSS3 Repeating Gradients - Hongkiat","description":"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using","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\/css3-repeating-gradients\/","og_locale":"en_US","og_type":"article","og_title":"Mastering CSS3 Repeating Gradients","og_description":"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-28T13:01:20+00:00","article_modified_time":"2024-04-03T17:43:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Mastering CSS3 Repeating Gradients","datePublished":"2012-11-28T13:01:20+00:00","dateModified":"2024-04-03T17:43:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/"},"wordCount":471,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/","name":"Mastering CSS3 Repeating Gradients - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg","datePublished":"2012-11-28T13:01:20+00:00","dateModified":"2024-04-03T17:43:13+00:00","description":"Many CSS3 features revolutionize how we design websites, and one standout feature is CSS3 Gradients. Before CSS3, creating gradient effects meant using","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-repeating-gradients\/repeating-linear-gradients.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-repeating-gradients\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering CSS3 Repeating Gradients"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-439","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15571","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15571"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15571\/revisions"}],"predecessor-version":[{"id":71650,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15571\/revisions\/71650"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15571"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}