{"id":319912,"date":"2020-08-27T14:09:37","date_gmt":"2020-08-27T21:09:37","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=319912"},"modified":"2022-09-15T16:01:36","modified_gmt":"2022-09-15T23:01:36","slug":"shape-image-threshold","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-image-threshold\/","title":{"rendered":"shape-image-threshold"},"content":{"rendered":"\n<p>The CSS <code>shape-image-threshold<\/code> property sets which pixels are included in the shape of an image when <code>shape-outside<\/code> is used to define the float area of a CSS element.<\/p>\n\n\n\n<p>Let&#8217;s say we&#8217;re using a linear gradient to define the float area of a CSS shape. Something like this where we go from a solid color to transparent at a 45\u00b0 angle:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=239%2C239&#038;ssl=1\" alt=\"\" class=\"wp-image-319920\" width=\"239\" height=\"239\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?w=318&amp;ssl=1 318w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=100%2C100&amp;ssl=1 100w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Normally, we&#8217;d define that as the <code>background-image<\/code> of an element. If we float this element and drop some content next to it, the gradient and content would sit side-by-side.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBZrWOx\" src=\"\/\/codepen.io\/anon\/embed\/qBZrWOx?height=450&amp;theme-id=1&amp;slug-hash=qBZrWOx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBZrWOx\" title=\"CodePen Embed qBZrWOx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But if we swap <code>background-image<\/code> for <code>shape-outside<\/code>, we&#8217;ll no longer see the gradient, but the content wraps around it where the pixels in the gradient are transparent.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdPWbpZ\" src=\"\/\/codepen.io\/anon\/embed\/mdPWbpZ?height=650&amp;theme-id=1&amp;slug-hash=mdPWbpZ&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdPWbpZ\" title=\"CodePen Embed mdPWbpZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But let&#8217;s say we think the text needs to hug the shape a little closer. That&#8217;s where we can reach for <code>shape-image-threshold<\/code>. We can use it to adjust where the content naturally wraps around the transparent pixels by including pixels that are semi-transparent. For example, a <code>shape-image-threshold<\/code> value of .3 will include pixels that are more than 30% opaque in the float area of the shape.<\/p>\n\n\n\n<p>This time, we&#8217;ll include the gradient to see just how this works.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEWezQL\" src=\"\/\/codepen.io\/anon\/embed\/ZEWezQL?height=850&amp;theme-id=1&amp;slug-hash=ZEWezQL&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEWezQL\" title=\"CodePen Embed ZEWezQL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>See that? By declaring <code>shape-image-threshold<\/code> on the second shape and setting it to a value of .15, we&#8217;ve included pixels that are greater than 15% opaque in the float area, allowing the content to overlap the shape a smidge.<\/p>\n\n\n\n<p>This also works when we&#8217;re defining the outside shape with an actual image file that uses transparency. Same deal, just a different shape to work with.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJNpLjL\" src=\"\/\/codepen.io\/anon\/embed\/OJNpLjL?height=850&amp;theme-id=1&amp;slug-hash=OJNpLjL&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJNpLjL\" title=\"CodePen Embed OJNpLjL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"3\"><code markup=\"tt\">.logo {\n  shape-outside: url(\/path\/to\/image.png);\n  shape-image-threshold: .6;\n}<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Applies to:<\/strong> floats<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Initial value:<\/strong> 0.0<\/li><li><strong>Animation type:<\/strong> number<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p>The <code>shape-image-threshold<\/code> property accepts a single alpha value between 0 and 1, where 0 is the equivalent of an opacity level of 0% (fully transparent) and 1 is the equivalent of an opacity level of 100% (no transparency). The initial value is 0.0.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">62+<\/td><td class=\"has-text-align-center\" data-align=\"center\">37+<\/td><td class=\"has-text-align-center\" data-align=\"center\">10.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">24+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/#search=shape-image-threshold\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">84+<\/td><td class=\"has-text-align-center\" data-align=\"center\">68+<\/td><td class=\"has-text-align-center\" data-align=\"center\">81+<\/td><td class=\"has-text-align-center\" data-align=\"center\">10.3+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-shapes\/#shape-image-threshold-property\" rel=\"noopener\">CSS Shapes Module Level 1 Specification<\/a> (Editor&#8217;s Draft)<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/shape-image-threshold\" rel=\"noopener\">MDN Documentation<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The CSS shape-image-threshold property sets which pixels are included in the shape of an image when shape-outside is used to define the float area of a CSS element. Let&#8217;s say we&#8217;re using a linear gradient to define the float area of a CSS shape. Something like this where we go from a solid color to [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":203844,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/","url_meta":{"origin":319912,"position":0},"title":"shape-outside","date":"June 17, 2015","format":false,"excerpt":"The shape-outside property controls how content will wrap around a floated element\u2019s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon: .element { float: left; shape-outside: circle(50%); width: 200px; height: 200px; } It\u2019s important to note that this property\u2026","rel":"","context":"In \"basic shapes\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":320118,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-margin\/","url_meta":{"origin":319912,"position":1},"title":"shape-margin","date":"August 31, 2020","format":false,"excerpt":"The CSS shape-margin property adds margin to CSS shapes that are created with the shape-outside property. It acts sorta like shape-image-threshold in that it changes the distance between the CSS shape and the content around it, but instead of working with opacity values to include semi-transparent pixels in the floated\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/shape-margin-illustration.svg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":254220,"url":"https:\/\/css-tricks.com\/snippets\/svg\/svg-patterns\/","url_meta":{"origin":319912,"position":2},"title":"SVG Patterns","date":"May 3, 2017","format":false,"excerpt":"The SVG <pattern> element allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like: Define a <pattern> inside of the SVGDefine the shapes inside of the patternUse the shapesCreate a new shape and fill it\u2026","rel":"","context":"In \"pattern\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13827,"url":"https:\/\/css-tricks.com\/snippets\/css\/force-file-upload-input-button-to-right-side-in-webkit\/","url_meta":{"origin":319912,"position":3},"title":"Force WebKit&#8217;s File Upload Input Button to the Right","date":"August 25, 2011","format":false,"excerpt":"Firefox and IE have the \"choose file\" button to the right of the filepath, while WebKit puts it on the left. This makes WebKit put it on the right as well. input[type=\"file\"]{ -webkit-appearance: none; text-align: left; -webkit-rtl-ordering: left; } input[type=\"file\"]::-webkit-file-upload-button{ -webkit-appearance: none; float: right; margin: 0 0 0 10px; border:\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333467,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret\/","url_meta":{"origin":319912,"position":4},"title":"caret","date":"January 27, 2021","format":false,"excerpt":"caret in CSS is a shorthand property that combines the caret-color and caret-shape properties into a single declaration. So, we get to write this: .element { caret: #ff7a18 underscore; } ...which is akin to writing this: .element { caret-color: #ff7a18; caret-shape: underscore; } That's a nice shortcut when you want\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14051,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/float\/","url_meta":{"origin":319912,"position":5},"title":"float","date":"September 5, 2011","format":false,"excerpt":"The float property in CSS is used for positioning and layout on web pages. A common usage might be floating an image to one side and letting text wrap around it. .intro-img { float: left; } Syntax float = block-start | block-end | inline-start | inline-end | snap-block | <snap-block()>\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/print-layout.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/319912"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=319912"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/319912\/revisions"}],"predecessor-version":[{"id":373480,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/319912\/revisions\/373480"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=319912"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=319912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}