{"id":28201,"date":"2019-10-14T21:17:42","date_gmt":"2019-10-14T13:17:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28201"},"modified":"2025-04-03T23:58:57","modified_gmt":"2025-04-03T15:58:57","slug":"css3-mix-blend-mode","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/","title":{"rendered":"How to Display Text on Image With CSS3 mix-blend-mode"},"content":{"rendered":"<p><strong>Image backgrounds<\/strong> look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the <code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/image-under-text\/\">background-clip: text;<\/a><\/code> property, however it\u2019s still an <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-clip#Values\">experimental feature<\/a> without sufficient browser support.<\/p>\n<p>The CSS alternative to show an image background behind a text is <strong>using the <code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mix-blend-mode\">mix-blend-mode<\/a><\/code> property<\/strong>. <strong>Blend modes for HTML elements<\/strong> are fairly supported across all modern desktop and mobile browsers with the exception of a few, such as Internet Explorer.<\/p>\n<p>In this post, we\u2019re going to see how <code>mix-blend-mode<\/code> (two of its modes specifically) works, and how you can use it to <strong>display a text with image background<\/strong> in two use cases:<\/p>\n<ol>\n<li>when the background image <strong>can be seen<\/strong> through the text<\/li>\n<li>when the background image <strong>runs around<\/strong> the text<\/li>\n<\/ol>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-tricks-more\/\">10 (More) CSS Tricks You Probably Overlooked<\/a>\n\t\t\t\t<\/p>\n<p>See some examples in the demo below (images are from unsplash.com).<\/p>\n<p><iframe height=\"1450\" scrolling=\"no\" src=\"https:\/\/codepen.io\/hkdc\/embed\/wzXvZN\/?height=1450&theme-id=0&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/hkdc\/pen\/wzXvZN\/\">Text with Image Background<\/a> by HONGKIAT (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/hkdc\">@hkdc<\/a>) on <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>. <\/iframe><\/p>\n<p>The <code>mix-blend-mode<\/code> CSS property defines how the <strong>content<\/strong> and the <strong>backdrop<\/strong> of an HTML element should <strong>blend together colorwise<\/strong>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-blend-mode\/\">CSS3 Blending Mode<\/a>\n\t\t\t\t<\/p>\n<p>Have a look at the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/blend-mode\">list of blending modes<\/a>, out of which we\u2019ll use <code>multiply<\/code> and <code>screen<\/code> in this post.<\/p>\n<p>First, let\u2019s look into how these two specific blend modes work.<\/p>\n<h2>How <code>multiply<\/code> & <code>screen<\/code> blend modes work<\/h2>\n<p>Blending modes technically are functions that <strong>calculate a final color value<\/strong> using the color components of an element and its backdrop.<\/p>\n<h3>The <code>multiply<\/code> blend mode<\/h3>\n<p>In the <code>multiply<\/code> blend mode, the individual colors of the elements and their backdrops are <strong>multiplied<\/strong>, and the resulting color is applied to the final blended version.<\/p>\n<p>The <code>multiply<\/code> blend mode is calculated according to the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/compositing-1\/#blendingmultiply\">following formula<\/a>:<\/p>\n<p><code>B(Cb, Cs) = Cb \u00d7 Cs<\/code><\/p>\n<p>where:\n  <code>Cb<\/code> \u2013 Color component of the backdrop\n  <code>Cs<\/code> \u2013 Color component of the source element\n  <code>B<\/code> \u2013 Blending function\n<\/p>\n<p>When <code>Cb<\/code> and <code>Cs<\/code> are multiplied, the resulting color is a blend of these two color components, and is <strong>as dark as the darkest of the two colors<\/strong>.<\/p>\n<p>To create our text image background, we need to focus on the case when <code>Cs<\/code> (the color component of the source element) is <strong>either black or white<\/strong>.<\/p>\n<p>If <code>Cs<\/code> is <strong>black<\/strong> its value is <code>0<\/code>, the output color will also be black, because <code>Cb \u00d7 0 = 0<\/code>. So, when the element is colored black, it <strong>doesn\u2019t matter what color the backdrop is<\/strong>, all we can see after blending is black.<\/p>\n<p>If <code>Cs<\/code> is <strong>white<\/strong> its value is <code>1<\/code>, the output color is whatever <code>Cb<\/code> is, because<code>Cb \u00d7 1 = Cb<\/code>. So in this case we see the backdrop directly <strong>as it is<\/strong>.<\/p>\n<h3>The <code>screen<\/code> blend mode<\/h3>\n<p>The <code>screen<\/code> blend mode works similarly to the <code>multiply<\/code> blend mode, but <strong>with the opposite result<\/strong>. So, a <strong>black foreground<\/strong> shows the backdrop <strong>as it is<\/strong>, and a <strong>white foreground shows white<\/strong> with whatever backdrop.<\/p>\n<p>Let\u2019s quickly see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/compositing-1\/#blendingscreen\">its formula<\/a>:<\/p>\n<p><code>B(Cb, Cs) = Cb + Cs - (Cb \u00d7 Cs)<\/code><\/p>\n<p>When <code>Cs<\/code> is <strong>black<\/strong> (0), the backdrop color will be shown after the blending, as:<\/p>\n<p><code>Cb + 0 - (Cb \u00d7 0) = Cb + 0 - 0 = Cb<\/code><\/p>\n<p>When <code>Cs<\/code> is <strong>white<\/strong> (1) the result will be white with any backdrop, as:<\/p>\n<p><code>Cb + 1 -(Cb \u00d7 1) = Cb + 1 - Cb = 1<\/code><\/p>\n<h2>1. Image shown through text<\/h2>\n<p>To display text showing through its background image, we use the <strong><code>screen<\/code> blend mode<\/strong> with <strong>black text<\/strong> and <strong>white surrounding space<\/strong>.<\/p>\n<pre>\r\n&lt;div class=\"backdrop\"&gt;\r\n &lt;p class=\"text\"&gt;Water&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<pre>\r\n.backdrop {\r\n width: 600px; height: 210px;\r\n background-image: url(someimage.jpg);\r\n background-size: 100%;\r\n margin: auto;\r\n}\r\n.text {\r\n color: black;\r\n background-color: white;\r\n mix-blend-mode: screen;\r\n width: 100%;\r\n height: 100%;\r\n font-size: 160pt;\r\n font-weight: bolder;\r\n text-align: center;\r\n line-height: 210px;\r\n margin: 0;\r\n}\r\n<\/pre>\n<p>Currently our text looks like below, in the next step we\u2019ll add custom color to the background.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg\" width=\"600\" height=\"218\" alt=\"Image Shown Through Text without Color\"><\/figure>\n<h3>Adding color<\/h3>\n<p>As you might\u2019ve guessed by now, using blend modes leave us only two color choices for the area that surrounds the text \u2014 <strong>black or white<\/strong>. However <strong>with white<\/strong>, it\u2019s possible to add some color to it <strong>using an overlay<\/strong>, if the overlay color <strong>matches nicely with the image used<\/strong>.<\/p>\n<p>To add color to the surrounding area, add a <code>&lt;div&gt;<\/code> to the HTML <strong>for an overlay<\/strong>, and give it a <strong>background color with high transparency<\/strong>. Also use the <code>mix-blend-mode: multiply<\/code> property for the overlay, as it helps the background color of the overlay to <strong>blend a bit better<\/strong> with the image appearing inside text.<\/p>\n<pre>\r\n&lt;div class=\"backdrop\"&gt;\r\n &lt;p class=\"text\"&gt;Water&lt;\/p&gt;\r\n &lt;div class=\"overlay\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<pre>\r\n.overlay {\r\n background-color: rgba(0,255,255,.1);\r\n mix-blend-mode: multiply;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n}\r\n<\/pre>\n<p>With this technique, we could color the surrounding area around the text with the image background:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-2.jpg\" width=\"600\" height=\"209\" alt=\"Image Shown Through Text with Blue Background\"><\/figure>\n<p>Note that the technique works well only with <strong>subtle transparent colors<\/strong>. If you use a fully opaque color, or a color that doesn\u2019t match with the image, the image appearing inside the text will have a very visible tint of the color used, so unless it\u2019s a look that you\u2019re going for, <strong>avoid opaque colors<\/strong>.<\/p>\n<h2>2. Text surrounded by image background<\/h2>\n<p>Even though a normal text placement over an image background <strong>requires the same technique<\/strong>, I\u2019m going to show you an example of how the above demo looks like when the <strong>effect is reversed<\/strong>, i.e. when the text color is white and the background is black.<\/p>\n<pre>\r\n.text {\r\n color: white;\r\n background-color: black;\r\n mix-blend-mode: screen;\r\n width: 100%;\r\n height: 100%;\r\n font-size: 160pt;\r\n font-weight: bolder;\r\n text-align: center;\r\n line-height: 210px;\r\n margin: 0;\r\n}\r\n<\/pre>\n<pre>\r\n.overlay {\r\n background-color: rgba(0,255,255,.1);\r\n mix-blend-mode: multiply;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n}\r\n<\/pre>\n<p>And below you can see how the reverse case looks like:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/text-surrounded-by-image.jpg\" width=\"600\" height=\"207\" alt=\"Text Surrounded By Image\"><\/figure>\n<p>Note that in Internet Explorer, or any other browser that doesn\u2019t support the <code>mix-blend-mode<\/code> property, the image background won\u2019t appear, and the text will remain black (or white).<\/p>","protected":false},"excerpt":{"rendered":"<p>Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it\u2019s still an experimental feature without sufficient browser support. The CSS alternative to show an image background behind a text is using the mix-blend-mode property. Blend modes for HTML elements are&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Display Text on Image With CSS3 mix-blend-mode - Hongkiat<\/title>\n<meta name=\"description\" content=\"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:\" \/>\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-mix-blend-mode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Text on Image With CSS3 mix-blend-mode\" \/>\n<meta property=\"og:description\" content=\"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-mix-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=\"2019-10-14T13:17:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T15:58:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 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-mix-blend-mode\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Display Text on Image With CSS3 mix-blend-mode\",\"datePublished\":\"2019-10-14T13:17:42+00:00\",\"dateModified\":\"2025-04-03T15:58:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/\"},\"wordCount\":788,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-mix-blend-mode\\\/image-inside-text-1.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/\",\"name\":\"How to Display Text on Image With CSS3 mix-blend-mode - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-mix-blend-mode\\\/image-inside-text-1.jpg\",\"datePublished\":\"2019-10-14T13:17:42+00:00\",\"dateModified\":\"2025-04-03T15:58:57+00:00\",\"description\":\"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-mix-blend-mode\\\/image-inside-text-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-mix-blend-mode\\\/image-inside-text-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-mix-blend-mode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display Text on Image With CSS3 mix-blend-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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Display Text on Image With CSS3 mix-blend-mode - Hongkiat","description":"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:","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-mix-blend-mode\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Text on Image With CSS3 mix-blend-mode","og_description":"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-10-14T13:17:42+00:00","article_modified_time":"2025-04-03T15:58:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Display Text on Image With CSS3 mix-blend-mode","datePublished":"2019-10-14T13:17:42+00:00","dateModified":"2025-04-03T15:58:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/"},"wordCount":788,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/","name":"How to Display Text on Image With CSS3 mix-blend-mode - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg","datePublished":"2019-10-14T13:17:42+00:00","dateModified":"2025-04-03T15:58:57+00:00","description":"Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip:","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-mix-blend-mode\/image-inside-text-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Display Text on Image With CSS3 mix-blend-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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7kR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28201","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28201"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28201\/revisions"}],"predecessor-version":[{"id":73476,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28201\/revisions\/73476"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28201"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}