{"id":15216,"date":"2012-10-15T18:15:36","date_gmt":"2012-10-15T10:15:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15216"},"modified":"2025-04-21T19:13:59","modified_gmt":"2025-04-21T11:13:59","slug":"css-filter","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-filter\/","title":{"rendered":"How to Apply CSS Filter Effects to Web Images"},"content":{"rendered":"<p>Adjusting image <strong>Brightness<\/strong> and <strong>Contrast<\/strong>, or converting an image to <strong>Grayscale<\/strong> or <strong>Sepia<\/strong> are common features you\u2019ll find in <a href=\"https:\/\/www.hongkiat.com\/blog\/11-free-alternatives-softwares-to-adobe-photoshop\/\">image editing applications<\/a> like <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/category\/photoshop\/\">Photoshop<\/a><\/strong>. Now, it\u2019s possible to add these same effects to web images using CSS.<\/p>\n<p>This capability comes from the <a href=\"https:\/\/www.w3schools.com\/w3css\/w3css_filters.asp\" rel=\"nofollow noopener\" target=\"_blank\">Filter Effects<\/a> specification, which is still in the Working Draft stage. However, WebKit browsers have taken the lead in implementing this feature.<\/p>\n<p>Let\u2019s explore these effects using <a href=\"https:\/\/www.flickr.com\/photos\/32189415@N00\/7611012764\/\" rel=\"nofollow noopener\" target=\"_blank\">this image from Mehdi Kh<\/a> as our example.<\/p>\n<h2>CSS Filter Effects<\/h2>\n<p>Applying these effects is straightforward. Here\u2019s how to turn images into <code>grayscale<\/code>:<\/p>\n<pre>\nimg {\n    -webkit-filter: grayscale(100%);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.jpg\" width=\"500\"><\/figure>\n<p>\u2026and this is how to apply a <code>sepia<\/code> effect similar to <a href=\"https:\/\/www.hongkiat.com\/blog\/instagram-filters-on-web-images\/\">Instagram<\/a>.<\/p>\n<pre>\nimg {\n    -webkit-filter: sepia(100%);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-sepia.jpg\" width=\"500\"><\/figure>\n<p>Both the <code>sepia<\/code> and <code>grayscale<\/code> values are specified in percentages, where <code>100%<\/code> represents maximum effect and <code>0%<\/code> leaves the image unchanged. When no value is explicitly specified, <code>100%<\/code> is used as the default.<\/p>\n<p>You can also brighten images using the <code>brightness<\/code> function, like this:<\/p>\n<pre>\nimg {\n    -webkit-filter: brightness(50%);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-brightness.jpg\" width=\"500\"><\/figure>\n<p>The brightness effect works similarly to the contrast and sepia effects, where <code>0%<\/code> maintains the original image, and <code>100%<\/code> fully brightens it. At maximum brightness, you might see only a white page instead of the image.<\/p>\n<p>The brightness effect also <strong>accepts negative values<\/strong>, which will <strong>darken the image<\/strong>.<\/p>\n<pre>\nimg {\n    -webkit-filter: brightness(-50%);\n}\n<\/pre>\n<p>To adjust the image contrast, use this method:<\/p>\n<pre>\nimg {\n    -webkit-filter: contrast(200%);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-contrast.jpg\" width=\"500\"><\/figure>\n<p>There\u2019s a slight difference in how the contrast value works. As shown above, we set <code>contrast()<\/code> to <code>200%<\/code> because <code>100%<\/code> is the baseline where the image remains unchanged. Values below <code>100%<\/code>, such as 50%, will reduce the image\u2019s contrast.<\/p>\n<p>We can also combine multiple effects in one declaration block. For example, here\u2019s how to turn an image to <code>grayscale<\/code> and increase its <code>contrast<\/code> by 50% simultaneously:<\/p>\n<pre>\nimg {\n    -webkit-filter: grayscale(100%) contrast(150%);\n}\n<\/pre>\n<p>By combining these filters with <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a> transitions, we can create graceful <code>hover<\/code> effects.<\/p>\n<pre>\nimg:hover {\n    -webkit-filter: grayscale(0%);\n}\n\nimg:hover {\n    -webkit-filter: sepia(0%);\n}\n\nimg:hover {\n    -webkit-filter: brightness(0%);\n}\n\nimg:hover {\n    -webkit-filter: contrast(100%);\n}\n<\/pre>\n<p>Finally, there\u2019s one more effect worth exploring: the <strong>Gaussian Blur<\/strong>, which blurs the targeted element.<\/p>\n<pre>\nimg:hover {\n    -webkit-filter: blur(5px);\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-blur.jpg\" width=\"500\"><\/figure>\n<p>Similar to Photoshop, the blur value is specified in pixel radius. If no value is explicitly stated, <code>0<\/code> is used as the default, leaving the image unchanged.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>The specification actually includes many more effects, such as <code>hue-rotate<\/code>, <code>invert<\/code>, and <code>saturate<\/code>, but these are less commonly used in real-world web applications. That\u2019s why we\u2019ve focused on just four main effects in this tutorial.<\/p>\n<p>While we\u2019ve demonstrated these effects on images, it\u2019s worth noting that these properties can be applied to any element in the DOM.<\/p>\n<p>You can view the live demo using the links below. Please note that the Filter feature is currently only supported in <strong>Chrome 19<\/strong> and above.<\/p>\n<div class=\"button\">\n<a href=\"https:\/\/hongkiat.github.io\/css-filter\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/css-filter\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you\u2019ll find in image editing applications like Photoshop. Now, it\u2019s possible to add these same effects to web images using CSS. This capability comes from the Filter Effects specification, which is still in the Working Draft stage. However, WebKit&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],"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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Apply CSS Filter Effects to Web Images - Hongkiat<\/title>\n<meta name=\"description\" content=\"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you&#039;ll find in image editing applications like\" \/>\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\/css-filter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Apply CSS Filter Effects to Web Images\" \/>\n<meta property=\"og:description\" content=\"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you&#039;ll find in image editing applications like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-filter\/\" \/>\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-15T10:15:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:13:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.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\\\/css-filter\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Apply CSS Filter Effects to Web Images\",\"datePublished\":\"2012-10-15T10:15:36+00:00\",\"dateModified\":\"2025-04-21T11:13:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/\"},\"wordCount\":398,\"commentCount\":22,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-filter\\\/filter-cover.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/\",\"name\":\"How to Apply CSS Filter Effects to Web Images - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-filter\\\/filter-cover.jpg\",\"datePublished\":\"2012-10-15T10:15:36+00:00\",\"dateModified\":\"2025-04-21T11:13:59+00:00\",\"description\":\"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you'll find in image editing applications like\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-filter\\\/filter-cover.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-filter\\\/filter-cover.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-filter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Apply CSS Filter Effects to Web Images\"}]},{\"@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 Apply CSS Filter Effects to Web Images - Hongkiat","description":"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you'll find in image editing applications like","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\/css-filter\/","og_locale":"en_US","og_type":"article","og_title":"How to Apply CSS Filter Effects to Web Images","og_description":"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you'll find in image editing applications like","og_url":"https:\/\/www.hongkiat.com\/blog\/css-filter\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-15T10:15:36+00:00","article_modified_time":"2025-04-21T11:13:59+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.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\/css-filter\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Apply CSS Filter Effects to Web Images","datePublished":"2012-10-15T10:15:36+00:00","dateModified":"2025-04-21T11:13:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/"},"wordCount":398,"commentCount":22,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.jpg","keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-filter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/","url":"https:\/\/www.hongkiat.com\/blog\/css-filter\/","name":"How to Apply CSS Filter Effects to Web Images - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.jpg","datePublished":"2012-10-15T10:15:36+00:00","dateModified":"2025-04-21T11:13:59+00:00","description":"Adjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you'll find in image editing applications like","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-filter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-filter\/filter-cover.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-filter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Apply CSS Filter Effects to Web Images"}]},{"@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-3Xq","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15216","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=15216"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15216\/revisions"}],"predecessor-version":[{"id":73948,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15216\/revisions\/73948"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15216"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}