{"id":15175,"date":"2012-10-10T21:01:50","date_gmt":"2012-10-10T13:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15175"},"modified":"2025-04-24T17:04:22","modified_gmt":"2025-04-24T09:04:22","slug":"css3-circular-elliptical-gradient","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/","title":{"rendered":"Understanding CSS3 Circular and Elliptical Gradients"},"content":{"rendered":"<p>Today we are going to continue our discussion on <strong>CSS3 Gradients<\/strong>. In the previous post we showed you how to create <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">Linear Gradients<\/a>.<\/strong> This time we will cover their relative, <strong>Circular and Elliptical Gradients<\/strong>.<\/p>\n<h2>The Gradient Syntax<\/h2>\n<p>The gradient in CSS3 is declared using the <code>background-image<\/code> property. This is for better compatibility when we also need to add <code>background-color<\/code> in a single rule set, so that they do not collide with one another. Then, to create the radial gradient we simply call it with this <code>radial-gradient()<\/code> function. There are four values to be included in the function to set the gradient properly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"250\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.jpg\" width=\"500\" alt=\"CSS Radial Gradient Syntax Example\"><\/figure>\n<p>The first value defines the <strong>gradient position<\/strong>. We can use a descriptive keyword such as top, bottom, center and left, or we can also be more specific, like <code>50% 50%<\/code> to set the gradient at the center or <code>0% 0%<\/code> to set the gradient to start at <code>top left<\/code>.<\/p>\n<p>The second value defines the <strong>shape and the gradient size<\/strong>; there are two arguments to shape the gradients: the first is <code>ellipse<\/code> (the default), and the second is <code>circle<\/code>.<\/p>\n<p>And for the <strong>gradient size<\/strong>, we can select one of the following six arguments.<\/p>\n<table>\n<thead>\n<tr>\n<th width=\"20%\">Values<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>closest-side<\/code><\/td>\n<td>\n<p>The gradient\u2019s shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><code>closest-corner<\/code><\/td>\n<td>\n<p>The gradient\u2019s shape is sized so it exactly meets the closest corner of the box from its center.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><code>farthest-side<\/code><\/td>\n<td>\n<p>Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><code>farthest-corner<\/code><\/td>\n<td>\n<p>The gradient\u2019s shape is sized so it exactly meets the farthest corner of the box from its center.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><code>contain<\/code><\/td>\n<td>\n<p>A synonym for <code>closest-side<\/code>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><code>cover<\/code><\/td>\n<td>\n<p>A synonym for <code>farthest-corner<\/code>.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Table Source:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en\/CSS\/radial-gradient\">Mozilla Developer Network<\/a>.<\/p>\n<p>Lastly, the third and the fourth defines the <strong>color combination<\/strong>. Here is how we write the syntax to create the <strong>Elliptical<\/strong> gradients, and this time we will use <code>cover<\/code> for the gradient size, so it will spread widely, covering the container:<\/p>\n<pre>\nbody {\n  background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient.jpg\" width=\"500\" alt=\"CSS Elliptical Gradient Example\"><\/figure>\n<p>To create the <strong>Circular<\/strong> gradient we can simply do it this way:<\/p>\n<pre>\nbody {\n  background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);\n}\n<\/pre>\n<p>As the name implies, the gradient shape will be a circle.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/circular-gradient.jpg\" width=\"500\" alt=\"CSS Circular Gradient Example\"><\/figure>\n<h2>Browser Support<\/h2>\n<p>Note that <a href=\"https:\/\/www.hongkiat.com\/blog\/20-awesome-battle-of-the-browsers-artworks\/\">all the browsers<\/a> are still in the process of providing full support for this feature, so they still need the vendor prefix. Thus, the complete syntax that will work in all modern browsers \u2013 <strong>IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ and Opera 11+<\/strong> \u2013 will look like this:<\/p>\n<pre>\nbody {\n  background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);\n  background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);\n  background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);\n  background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);\n  background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);\n}\n<\/pre>\n<p>Check out the demo or download the source to play around with gradients.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-circular-ellipitical-gradient\/\">Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-circular-ellipitical-gradient\/\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will cover their relative, Circular and Elliptical Gradients. The Gradient Syntax The gradient in CSS3 is declared using the background-image property. This is for better compatibility when we also&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":[3392,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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Understanding CSS3 Circular and Elliptical Gradients - Hongkiat<\/title>\n<meta name=\"description\" content=\"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will\" \/>\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-circular-elliptical-gradient\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding CSS3 Circular and Elliptical Gradients\" \/>\n<meta property=\"og:description\" content=\"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/\" \/>\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-10-10T13:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:04:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.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=\"3 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-circular-elliptical-gradient\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Understanding CSS3 Circular and Elliptical Gradients\",\"datePublished\":\"2012-10-10T13:01:50+00:00\",\"dateModified\":\"2025-04-24T09:04:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/\"},\"wordCount\":419,\"commentCount\":26,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-circular-elliptical-gradient\\\/ellipse-gradient-syntax.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/\",\"name\":\"Understanding CSS3 Circular and Elliptical Gradients - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-circular-elliptical-gradient\\\/ellipse-gradient-syntax.jpg\",\"datePublished\":\"2012-10-10T13:01:50+00:00\",\"dateModified\":\"2025-04-24T09:04:22+00:00\",\"description\":\"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-circular-elliptical-gradient\\\/ellipse-gradient-syntax.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-circular-elliptical-gradient\\\/ellipse-gradient-syntax.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-circular-elliptical-gradient\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding CSS3 Circular and Elliptical 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":"Understanding CSS3 Circular and Elliptical Gradients - Hongkiat","description":"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will","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-circular-elliptical-gradient\/","og_locale":"en_US","og_type":"article","og_title":"Understanding CSS3 Circular and Elliptical Gradients","og_description":"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-10T13:01:50+00:00","article_modified_time":"2025-04-24T09:04:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Understanding CSS3 Circular and Elliptical Gradients","datePublished":"2012-10-10T13:01:50+00:00","dateModified":"2025-04-24T09:04:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/"},"wordCount":419,"commentCount":26,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/","name":"Understanding CSS3 Circular and Elliptical Gradients - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.jpg","datePublished":"2012-10-10T13:01:50+00:00","dateModified":"2025-04-24T09:04:22+00:00","description":"Today we are going to continue our discussion on CSS3 Gradients. In the previous post we showed you how to create Linear Gradients. This time we will","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-circular-elliptical-gradient\/ellipse-gradient-syntax.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding CSS3 Circular and Elliptical 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-3WL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15175","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=15175"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15175\/revisions"}],"predecessor-version":[{"id":74093,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15175\/revisions\/74093"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15175"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}