{"id":21763,"date":"2021-03-30T21:19:09","date_gmt":"2021-03-30T13:19:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21763"},"modified":"2025-04-24T17:09:46","modified_gmt":"2025-04-24T09:09:46","slug":"css3-blend-mode","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/","title":{"rendered":"CSS3 Blending Mode"},"content":{"rendered":"<p><strong>Note: <\/strong>Enabling a flag on the <code>chrome:\/\/flags<\/code> page was required for this <strong>CSS Tip<\/strong> to work when this article was written.<\/p>\n<p>If you have ever used a graphic or photo editor like Photoshop or Pixelmator, you should already be familiar with <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/\">blending modes<\/a>. Blending modes are a collection of modes that enable an object to<strong> blend with other objects<\/strong>, producing a <strong>contrastive output from the mix<\/strong>. If done correctly, Blending Modes can produce a very enticing result, like this.<\/p>\n<p>Blending modes have historically been a feature found only in graphic and photo editors. Nowadays, you can also find them in the CSS realm.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/\" class=\"ref-block__link\" title=\"Read More: Mastering LESS Color Functions for Web Design\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mastering LESS Color Functions for Web Design<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-color-functions.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16418 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-color-functions.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Mastering LESS Color Functions for Web Design<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tLESS is a powerful tool for web designers. We've previously discussed various aspects of LESS, from designing sleek...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Getting Started<\/h2>\n<p>It\u2019s worth noting that CSS3 Blend Mode was an experimental feature at the time of writing. Firefox and Chrome were the only browsers that shipped with this feature at the time of the writing.<\/p>\n<p><strong>Note:<\/strong> In Chrome, to render CSS3 Blend Modes, you previously had to enable the <strong>Enable experimental Web Platform features<\/strong> flag from the <code>chrome:\/\/flags<\/code> page. **Note:** This flag may no longer be necessary in current Chrome versions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Chrome Web Platform Features flag\" height=\"100\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.jpg\" width=\"500\"><\/figure>\n<h2>Background and Mix Blend Mode<\/h2>\n<p>There are two main CSS properties for Blending Modes: <code>mix-blend-mode<\/code> and <code>background-blend-mode<\/code>.<\/p>\n<p>The <code>mix-blend-mode<\/code> property defines <strong>how the content of an element blends with the content underneath it<\/strong>. The <code>background-blend-mode<\/code> property, as the name implies, <strong>blends an element\u2019s background layers (color, image, or gradient)<\/strong>.<\/p>\n<p>Similar to Photoshop, you can apply the following blending modes with these CSS properties: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.<\/p>\n<figure>\n    <img loading=\"lazy\" decoding=\"async\" alt=\"Photoshop Layer Blend Modes\" height=\"320\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/blend-mode-in-photoshop.jpg\" width=\"500\"><figcaption>Blend Mode options in Photoshop Layer panel.<\/figcaption><\/figure>\n<h2>Using CSS3 Blend Mode<\/h2>\n<p>The Google logo is colorful and has been adapted in many forms for the Google Doodle project. In this post, we will apply the blend effect to the Google logotype to illustrate how this CSS3 feature works.<\/p>\n<p>First, let\u2019s set up the HTML markup. We wrap each letter in a <code>&lt;span&gt;<\/code> element so we can specify different colors and style rules for each letter.<\/p>\n<pre>\n&lt;h1&gt;\n    &lt;span&gt;G&lt;\/span&gt;\n    &lt;span&gt;o&lt;\/span&gt;\n    &lt;span&gt;o&lt;\/span&gt;\n    &lt;span&gt;g&lt;\/span&gt;\n    &lt;span&gt;l&lt;\/span&gt;\n    &lt;span&gt;e&lt;\/span&gt;\n&lt;\/h1&gt;\n<\/pre>\n<p>Then, we add the Google brand colors, which can be found on sites like BrandColors. We use the <code>nth-child<\/code> CSS pseudo-class selector to target each <code>&lt;span&gt;<\/code>, allowing us to apply styles without adding extra HTML classes to the elements.<\/p>\n<pre>\n.demo-wrapper .title {\n    letter-spacing: -25px;\n}\n\nspan:first-child {\n    color: #4285f4;\n    position: relative;\n    z-index: 100;\n}\n\nspan:nth-child(2) {\n    color: #db4437;\n}\n\nspan:nth-child(3) {\n    color: #f4b400;\n}\n\nspan:nth-child(4) {\n    color: #4285f4;\n    position: relative;\n    z-index: 100;\n}\n\nspan:nth-child(5) {\n    color: #0f9d58;\n}\n\nspan:nth-child(6) {\n    color: #db4437;\n}\n<\/pre>\n<p>At this stage, here\u2019s how the logo looks. The logo looks denser because we decreased the letter-spacing to <code>-25px<\/code> in the CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Google logo colored letters\" height=\"180\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/google-logo.jpg\" width=\"500\"><\/figure>\n<p>Now we apply the Blend mode.<\/p>\n<pre>\nspan {\n    mix-blend-mode: multiply;\n}\n<\/pre>\n<p>The original colors of the logo, as well as the colors where the letters intersect, become more <em>vivid<\/em>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Google logo CSS blend\" height=\"180\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/google-logo-blended.jpg\" width=\"500\"><\/figure>\n<p>We have created two versions of the logo: one using standard opacity and one using CSS3 Blend Mode. The results are distinctive; the colors of the logo using opacity look pale and faded compared to the blended version. See a demo comparison below.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-blending-mode\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-blending-mode\/\">Download Source<\/a>\n<\/div>\n<h2>Further resources<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/drafts.fxtf.org\/compositing-1\/#mix-blend-mode\">CSS Compositing and Blending Level 1 Documentation<\/a> \u2014 W3C<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bennettfeely.com\/gradients\/\">New CSS gradient possibilities with the background-blend-mode property<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or photo editor like Photoshop or Pixelmator, you should already be familiar with blending modes. Blending modes are a collection of modes that enable an object to&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,4501],"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>How to Use CSS3 Blending Mode - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or\" \/>\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-blend-mode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Blending Mode\" \/>\n<meta property=\"og:description\" content=\"Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/\" \/>\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=\"2021-03-30T13:19:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:09:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.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-blend-mode\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"CSS3 Blending Mode\",\"datePublished\":\"2021-03-30T13:19:09+00:00\",\"dateModified\":\"2025-04-24T09:09:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/\"},\"wordCount\":479,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-blend-mode\\\/web-platform-feature-enabled.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/\",\"name\":\"How to Use CSS3 Blending Mode - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-blend-mode\\\/web-platform-feature-enabled.jpg\",\"datePublished\":\"2021-03-30T13:19:09+00:00\",\"dateModified\":\"2025-04-24T09:09:46+00:00\",\"description\":\"Note: Enabling a flag on the chrome:\\\/\\\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-blend-mode\\\/web-platform-feature-enabled.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-blend-mode\\\/web-platform-feature-enabled.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-blend-mode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Blending Mode\"}]},{\"@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":"How to Use CSS3 Blending Mode - Hongkiat","description":"Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or","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-blend-mode\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 Blending Mode","og_description":"Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-03-30T13:19:09+00:00","article_modified_time":"2025-04-24T09:09:46+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.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-blend-mode\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"CSS3 Blending Mode","datePublished":"2021-03-30T13:19:09+00:00","dateModified":"2025-04-24T09:09:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/"},"wordCount":479,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/","name":"How to Use CSS3 Blending Mode - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.jpg","datePublished":"2021-03-30T13:19:09+00:00","dateModified":"2025-04-24T09:09:46+00:00","description":"Note: Enabling a flag on the chrome:\/\/flags page was required for this CSS Tip to work when this article was written. If you have ever used a graphic or","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-blend-mode\/web-platform-feature-enabled.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Blending Mode"}]},{"@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-5F1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21763","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=21763"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21763\/revisions"}],"predecessor-version":[{"id":74103,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21763\/revisions\/74103"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21763"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}