{"id":14083,"date":"2011-09-05T20:56:01","date_gmt":"2011-09-06T03:56:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14083"},"modified":"2016-02-23T14:23:13","modified_gmt":"2016-02-23T21:23:13","slug":"opacity","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/","title":{"rendered":"opacity"},"content":{"rendered":"<p>The <code>opacity<\/code> property in <abbr title=\"cascading style sheets\">CSS<\/abbr> specifies <em>how transparent<\/em> an element is. <\/p>\n<p>Basic use:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">div {\r\n  opacity: 0.5;\r\n}<\/code><\/pre>\n<p>Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some <a href=\"https:\/\/css-tricks.com\/non-transparent-elements-inside-transparent-elements\/\">trickery<\/a>. Values are a number from 0 to 1 representing the opacity of the channel (the &#8220;alpha&#8221; channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).<\/p>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"lykCe\" data-user=\"grayghostvisuals\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/grayghostvisuals\/pen\/lykCe\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<h3>IE Compatibility<\/h3>\n<p>If you want <a href=\"https:\/\/css-tricks.com\/css-transparency-settings-for-all-broswers\">opacity to work in all versions of IE<\/a>, the order should be as follows:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.opaque {\r\n  \/* Theoretically for IE 8 &amp; 9 (more valid) *\/\r\n  \/* ...but not required as filter works too *\/\r\n  \/* should come BEFORE filter *\/\r\n  -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; \/\/ IE8\r\n\r\n  \/* This works in IE 8 &amp; 9 too *\/\r\n  \/* ... but also 5, 6, 7 *\/\r\n  filter: alpha(opacity=50); \/\/ IE 5-7\r\n  \r\n  \/* Modern Browsers *\/\r\n  opacity: 0.5;\r\n}<\/code><\/pre>\n<p><em>If you don\u2019t use this order, IE8-as-IE7 doesn\u2019t apply the opacity, although IE8 and a pure IE7 do.<\/em><\/p>\n<h3>Note on Stacking Contexts<\/h3>\n<p>If an element with <code>opacity<\/code> and a value less than 1 is positioned, the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\"><code>z-index<\/code><\/a> property applies as described in CSS2.1, except that the <code>auto<\/code> value is treated as 0 since a new stacking context is always created.<\/p>\n<p>Opacity can be used as an alternative to the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/\"><code>visibility<\/code><\/a> property: <code>visibility: hidden;<\/code> is just like <code>opacity: 0;<\/code>.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/\">Color<\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-color\/#opacity\" rel=\"noopener\"><abbr title=\"world wide web consortium\">W3C<\/abbr> CSS Color Module Level 3 Recommendation<\/a><\/li>\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/css-color-3\/#opacity\" rel=\"noopener\"><abbr title=\"world wide web consortium\">W3C<\/abbr> CSS3 Color Module Level 3 Editors Draft<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/opacity\" rel=\"noopener\">MDN Docs<\/a><\/li>\n<li><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/opacity\" rel=\"noopener\">Web Platform Docs<\/a><\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=css-opacity\" rel=\"noopener\">Caniuse.com<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/toggle-visibility-when-hiding-elements\/\">Toggle Visibility When Hiding Elements<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">24+<\/td>\n<td class=\"yep\">5.1+<\/td>\n<td class=\"yep\">19+<\/td>\n<td class=\"yep\">12.1+<\/td>\n<td class=\"yep\">9+<\/td>\n<td class=\"yep\">2.1+<\/td>\n<td class=\"yep\">3.2+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The opacity property in CSS specifies how transparent an element is. Basic use: div { opacity: 0.5; } Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","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":319912,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-image-threshold\/","url_meta":{"origin":14083,"position":0},"title":"shape-image-threshold","date":"August 27, 2020","format":false,"excerpt":"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's say we're using a linear gradient to define the float area of a CSS shape. Something like this where we go\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":161605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/","url_meta":{"origin":14083,"position":1},"title":"filter","date":"February 18, 2014","format":false,"excerpt":"CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element\u2019s rendering before the element is displayed. Filters are commonly used to\u2026","rel":"","context":"In \"filter\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14029,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/","url_meta":{"origin":14083,"position":2},"title":"color","date":"September 5, 2011","format":false,"excerpt":"The color property in CSS sets the color of text and text decorations. p { color: blue; } Values The color property can accept any CSS color value. Named colors: for example, \"aqua\". Hex colors: for example, #00FFFF or #0FF. RGB and RGBa colors: for example, rgb(0, 255, 255) and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3243,"url":"https:\/\/css-tricks.com\/snippets\/css\/cross-browser-opacity\/","url_meta":{"origin":14083,"position":3},"title":"Cross Browser Opacity","date":"August 6, 2009","format":false,"excerpt":"These days, you really don't have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this: .thing { opacity: 0.5; } 0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17657,"url":"https:\/\/css-tricks.com\/snippets\/css\/transparent-background-images\/","url_meta":{"origin":14083,"position":4},"title":"Transparent Background Images","date":"August 5, 2012","format":false,"excerpt":"There is no background-opacity property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: \"\"; background: url(image.jpg); opacity: 0.5; top: 0; left:\u2026","rel":"","context":"With 87 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192756,"url":"https:\/\/css-tricks.com\/snippets\/sass\/black-white-opacity-mixins\/","url_meta":{"origin":14083,"position":5},"title":"Black and White Opacity Functions","date":"January 9, 2015","format":false,"excerpt":"It's pretty common to need a bit of transparent black or white. In CSS, you can do: .half-black { background: rgba(0, 0, 0, 0.5); } It gets easier in Sass, where you can substitute a color name: .half-black { background: rgba(black, 0.5); } Or make it easier still, by making\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14083"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14083"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14083\/revisions"}],"predecessor-version":[{"id":238350,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14083\/revisions\/238350"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14083"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}