[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"topic:css-opacity-blend-modes":434,"blog-categories":541},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,366,398],{"id":75,"name":342,"slug":343,"order_index":344,"topics":345},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[346,350,354,358,362],{"id":347,"title":348,"slug":349,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":351,"title":352,"slug":353,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":355,"title":356,"slug":357,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":359,"title":360,"slug":361,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":363,"title":364,"slug":365,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":87,"name":367,"slug":368,"order_index":344,"topics":369},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[370,374,378,382,386,390,394],{"id":371,"title":372,"slug":373,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":375,"title":376,"slug":377,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":379,"title":380,"slug":381,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":383,"title":384,"slug":385,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":387,"title":388,"slug":389,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":391,"title":392,"slug":393,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":395,"title":396,"slug":397,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":79,"name":399,"slug":400,"order_index":344,"topics":401},"Selectors & the Cascade","selectors-the-cascade",[402,406,410,414,418,422,426,430],{"id":403,"title":404,"slug":405,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":407,"title":408,"slug":409,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":411,"title":412,"slug":413,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":415,"title":416,"slug":417,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":419,"title":420,"slug":421,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":423,"title":424,"slug":425,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":427,"title":428,"slug":429,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":431,"title":432,"slug":433,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":435},{"id":391,"title":392,"slug":393,"content":436,"course":437,"subcategory":438,"author":439,"reading_time_minutes":39,"cornerstone":26,"schema_type":445,"faq_json":5,"video_url":5,"canonical_url":446,"meta_title":447,"meta_description":448,"og_image":5,"toc_json":449,"code_examples":502,"quiz":520,"exercises":523,"published_at":5,"updated_at":538,"prev":539,"next":540},"\u003Ch2 id=\"what-are-css-opacity-and-blend-modes\">What Are CSS Opacity and Blend Modes?\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS opacity\u003C\u002Fstrong> property controls how transparent an element is, while \u003Cstrong>blend modes\u003C\u002Fstrong> control how an element's colors mix with whatever is behind it. Together they make overlays, fades, duotone images, text knockouts and Photoshop-like effects possible in pure CSS. Our focus keyword is \u003Cstrong>CSS opacity\u003C\u002Fstrong>, and you will also learn trending topics: opacity vs rgba, mix-blend-mode examples, background-blend-mode duotone, CSS isolation property, fade in and out transitions, and how opacity creates a stacking context.\u003C\u002Fp>\u003Ch2 id=\"1-the-opacity-property\">1. The opacity Property\u003C\u002Fh2>\u003Cp>\u003Ccode>opacity\u003C\u002Fcode> accepts a number from \u003Ccode>0\u003C\u002Fcode> (fully transparent) to \u003Ccode>1\u003C\u002Fcode> (fully opaque), or a percentage such as \u003Ccode>50%\u003C\u002Fcode>. It applies to the \u003Cstrong>whole element\u003C\u002Fstrong>, including its text, borders, background and all children.\u003C\u002Fp>\u003Cpre>\u003Ccode>.faded { opacity: 0.5; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"2-opacity-vs-color-alpha-rgba-hsl-alpha\">2. opacity vs Color Alpha (rgba, hsl \u002F alpha)\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003C\u002Fth>\u003Cth>opacity\u003C\u002Fth>\u003Cth>Color with alpha\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Affects\u003C\u002Ftd>\u003Ctd>The entire element and all children\u003C\u002Ftd>\u003Ctd>Only that one color (background, border, text...)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Children\u003C\u002Ftd>\u003Ctd>Cannot be made more opaque than the parent\u003C\u002Ftd>\u003Ctd>Children stay fully opaque\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Example\u003C\u002Ftd>\u003Ctd>\u003Ccode>opacity: .6\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>\u003Ccode>background: rgb(0 0 0 \u002F 60%)\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>To make a semi-transparent background with fully readable text, use color alpha, not opacity.\u003C\u002Fp>\u003Ch2 id=\"3-opacity-side-effects\">3. opacity Side Effects\u003C\u002Fh2>\u003Cul>\u003Cli>Any \u003Ccode>opacity\u003C\u002Fcode> value less than 1 creates a new \u003Cstrong>stacking context\u003C\u002Fstrong>. This can change how \u003Ccode>z-index\u003C\u002Fcode> works for the element's children.\u003C\u002Fli>\u003Cli>An element with \u003Ccode>opacity: 0\u003C\u002Fcode> is invisible but still takes space, still receives clicks and can still be focused by keyboard. Add \u003Ccode>visibility: hidden\u003C\u002Fcode> or \u003Ccode>pointer-events: none\u003C\u002Fcode> when hiding interactive content.\u003C\u002Fli>\u003Cli>Screen readers still read content with \u003Ccode>opacity: 0\u003C\u002Fcode>. Use \u003Ccode>display: none\u003C\u002Fcode> or \u003Ccode>hidden\u003C\u002Fcode> to remove it from the accessibility tree.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-fade-transitions\">4. Fade Transitions\u003C\u002Fh2>\u003Cp>\u003Ccode>opacity\u003C\u002Fcode> is one of the best properties to animate because browsers can animate it on the GPU without triggering layout. Combine \u003Ccode>transition: opacity .3s\u003C\u002Fcode> with \u003Ccode>:hover\u003C\u002Fcode> for fades. For fade-outs that also remove the element, combine opacity with \u003Ccode>visibility\u003C\u002Fcode> or use the modern \u003Ccode>transition-behavior: allow-discrete\u003C\u002Fcode> together with \u003Ccode>@starting-style\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"5-mix-blend-mode\">5. mix-blend-mode\u003C\u002Fh2>\u003Cp>\u003Ccode>mix-blend-mode\u003C\u002Fcode> blends an element with the content \u003Cem>behind it\u003C\u002Fem> (its parent's background and earlier siblings). The syntax is simply \u003Ccode>mix-blend-mode: multiply;\u003C\u002Fcode>.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Mode\u003C\u002Fth>\u003Cth>Effect\u003C\u002Fth>\u003Cth>Typical use\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>normal\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Default, no blending\u003C\u002Ftd>\u003Ctd>Everyday elements\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>multiply\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Darkens; white becomes transparent\u003C\u002Ftd>\u003Ctd>Shadows, logos on colored backgrounds, duotone\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>screen\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Lightens; black becomes transparent\u003C\u002Ftd>\u003Ctd>Glows, light leaks\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>overlay\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Boosts contrast, mixes multiply and screen\u003C\u002Ftd>\u003Ctd>Textures, color grading\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>darken\u003C\u002Fcode> \u002F \u003Ccode>lighten\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Keeps the darkest or lightest channel\u003C\u002Ftd>\u003Ctd>Layering shapes\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>color-dodge\u003C\u002Fcode> \u002F \u003Ccode>color-burn\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Strong brighten or darken effects\u003C\u002Ftd>\u003Ctd>Highlights, dramatic looks\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>difference\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Subtracts colors; creates inverted looks\u003C\u002Ftd>\u003Ctd>Text that stays visible on any background\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>hue\u003C\u002Fcode>, \u003Ccode>saturation\u003C\u002Fcode>, \u003Ccode>color\u003C\u002Fcode>, \u003Ccode>luminosity\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Applies a single HSL component\u003C\u002Ftd>\u003Ctd>Recoloring images\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"6-background-blend-mode\">6. background-blend-mode\u003C\u002Fh2>\u003Cp>Blends the \u003Cstrong>background layers of one element\u003C\u002Fstrong> with each other and with its background color. It does not affect children or content. It is perfect for duotone images: set a \u003Ccode>background-color\u003C\u002Fcode>, add an image, and use \u003Ccode>background-blend-mode: multiply\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"7-the-isolation-property\">7. The isolation Property\u003C\u002Fh2>\u003Cp>Blend modes look at everything behind an element up to the nearest stacking context. Set \u003Ccode>isolation: isolate\u003C\u002Fcode> on a parent to create a new stacking context so its children blend only with each other, and not with the page behind. This avoids surprising results and unexpected color shifts.\u003C\u002Fp>\u003Ch2 id=\"8-creative-techniques\">8. Creative Techniques\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Text knockout:\u003C\u002Fstrong> big text with \u003Ccode>mix-blend-mode: screen\u003C\u002Fcode> or \u003Ccode>multiply\u003C\u002Fcode> over an image.\u003C\u002Fli>\u003Cli>\u003Cstrong>Auto-contrast text:\u003C\u002Fstrong> white text with \u003Ccode>mix-blend-mode: difference\u003C\u002Fcode> stays readable over both light and dark areas.\u003C\u002Fli>\u003Cli>\u003Cstrong>Duotone photo:\u003C\u002Fstrong> grayscale image plus a colored layer with \u003Ccode>mix-blend-mode: multiply\u003C\u002Fcode> or \u003Ccode>lighten\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Logo on any color:\u003C\u002Fstrong> a logo with white background using \u003Ccode>mix-blend-mode: multiply\u003C\u002Fcode> looks transparent.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-performance-and-accessibility\">9. Performance and Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>Blend modes on large or many elements can be expensive because the browser must composite several layers. Test on mid-range phones.\u003C\u002Fli>\u003Cli>Blended colors change with the background, so verify text contrast in every case. Avoid blending for critical body text.\u003C\u002Fli>\u003Cli>Provide a fallback: unsupported browsers just show normal blending. All current browsers support the standard blend modes.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use color alpha for translucent backgrounds and opacity for fading whole components.\u003C\u002Fli>\u003Cli>Use \u003Ccode>isolation: isolate\u003C\u002Fcode> on components that use blend modes.\u003C\u002Fli>\u003Cli>Hide content properly (\u003Ccode>hidden\u003C\u002Fcode>, \u003Ccode>display: none\u003C\u002Fcode>) when it should not be reachable.\u003C\u002Fli>\u003Cli>Animate opacity and transform rather than layout properties.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using \u003Ccode>opacity\u003C\u002Fcode> on a container and making its text faded too.\u003C\u002Fli>\u003Cli>Leaving an \u003Ccode>opacity: 0\u003C\u002Fcode> button clickable and focusable.\u003C\u002Fli>\u003Cli>Forgetting that opacity below 1 creates a stacking context and breaks expected z-index layering.\u003C\u002Fli>\u003Cli>Confusing \u003Ccode>mix-blend-mode\u003C\u002Fcode> (blends the element with what is behind) with \u003Ccode>background-blend-mode\u003C\u002Fcode> (blends only background layers).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Opacity fades whole elements, alpha colors fade individual paints, and blend modes mix layers like design software. Know the stacking-context effect, use \u003Ccode>isolation\u003C\u002Fcode>, and test contrast for effects that change with the background. Try the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .row { display: flex; gap: 10px; flex-wrap: wrap; }\n  .o { width: 100px; height: 80px; background: #2563eb; color: #fff; padding: 6px; font-size: 12px; }\n<\u002Fstyle>\n<div class='row'>\n  <div class='o' style='opacity: 1'>opacity 1<\u002Fdiv>\n  <div class='o' style='opacity: .7'>opacity .7<\u002Fdiv>\n  <div class='o' style='opacity: .4'>opacity .4<\u002Fdiv>\n  <div class='o' style='opacity: .1'>opacity .1<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; padding: 16px; background: linear-gradient(135deg, #f59e0b, #ec4899); }\n  .box { display: inline-block; width: 200px; padding: 18px; margin: 8px; color: #fff; font-weight: bold; border-radius: 10px; }\n  .op { background: #000; opacity: .5; }\n  .alpha { background: rgb(0 0 0 \u002F 50%); }\n<\u002Fstyle>\n<div class='box op'>opacity: .5 (text is faded too)<\u002Fdiv>\n<div class='box alpha'>rgb alpha 50% (text stays sharp)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .card { position: relative; width: 240px; height: 150px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #38bdf8, #6366f1); }\n  .card .info { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(15 23 42 \u002F 80%); color: #fff; opacity: 0; transition: opacity .35s; }\n  .card:hover .info { opacity: 1; }\n<\u002Fstyle>\n<div class='card'><div class='info'>Fade in on hover<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .stage { isolation: isolate; width: 320px; height: 170px; position: relative; background: #fde047; border-radius: 12px; overflow: hidden; }\n  .c { position: absolute; width: 120px; height: 120px; border-radius: 50%; }\n  .c1 { background: #ef4444; left: 30px; top: 25px; mix-blend-mode: multiply; }\n  .c2 { background: #3b82f6; left: 90px; top: 25px; mix-blend-mode: multiply; }\n  .c3 { background: #22c55e; left: 150px; top: 25px; mix-blend-mode: multiply; }\n<\u002Fstyle>\n<div class='stage'><div class='c c1'><\u002Fdiv><div class='c c2'><\u002Fdiv><div class='c c3'><\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .duo { height: 170px; max-width: 360px; border-radius: 12px; background-color: #7c3aed; background-image: linear-gradient(135deg, #fef08a, #16a34a 45%, #0f172a); background-blend-mode: multiply; margin-bottom: 14px; }\n  .diff { height: 120px; max-width: 360px; border-radius: 12px; background: linear-gradient(90deg, #fff 50%, #111 50%); display: grid; place-items: center; }\n  .diff h2 { margin: 0; font: 800 34px sans-serif; color: #fff; mix-blend-mode: difference; }\n<\u002Fstyle>\n<div class='duo'><\u002Fdiv>\n<div class='diff'><h2>Always Readable<\u002Fh2><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":367,"slug":368},{"slug":440,"display_name":441,"job_title":5,"short_bio":5,"expertise_tags":442,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":443,"posts":444},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-opacity-blend-modes","CSS Opacity & Blend Modes: mix-blend-mode Guide","Understand CSS opacity vs rgba, stacking contexts, mix-blend-mode, background-blend-mode, isolation and creative blending examples.",[450,454,458,462,466,470,474,478,482,486,490,494,498],{"id":451,"text":452,"level":23,"children":453},"what-are-css-opacity-and-blend-modes","What Are CSS Opacity and Blend Modes?",[],{"id":455,"text":456,"level":23,"children":457},"1-the-opacity-property","1. The opacity Property",[],{"id":459,"text":460,"level":23,"children":461},"2-opacity-vs-color-alpha-rgba-hsl-alpha","2. opacity vs Color Alpha (rgba, hsl \u002F alpha)",[],{"id":463,"text":464,"level":23,"children":465},"3-opacity-side-effects","3. opacity Side Effects",[],{"id":467,"text":468,"level":23,"children":469},"4-fade-transitions","4. Fade Transitions",[],{"id":471,"text":472,"level":23,"children":473},"5-mix-blend-mode","5. mix-blend-mode",[],{"id":475,"text":476,"level":23,"children":477},"6-background-blend-mode","6. background-blend-mode",[],{"id":479,"text":480,"level":23,"children":481},"7-the-isolation-property","7. The isolation Property",[],{"id":483,"text":484,"level":23,"children":485},"8-creative-techniques","8. Creative Techniques",[],{"id":487,"text":488,"level":23,"children":489},"9-performance-and-accessibility","9. Performance and Accessibility",[],{"id":491,"text":492,"level":23,"children":493},"best-practices","Best Practices",[],{"id":495,"text":496,"level":23,"children":497},"common-mistakes","Common Mistakes",[],{"id":499,"text":500,"level":23,"children":501},"summary","Summary",[],[503,508,511,514,517],{"id":504,"language":505,"code":506,"is_editable":507},279,"html","\u003Cstyle>\n  body { font-family: sans-serif; }\n  .row { display: flex; gap: 10px; flex-wrap: wrap; }\n  .o { width: 100px; height: 80px; background: #2563eb; color: #fff; padding: 6px; font-size: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cdiv class='o' style='opacity: 1'>opacity 1\u003C\u002Fdiv>\n  \u003Cdiv class='o' style='opacity: .7'>opacity .7\u003C\u002Fdiv>\n  \u003Cdiv class='o' style='opacity: .4'>opacity .4\u003C\u002Fdiv>\n  \u003Cdiv class='o' style='opacity: .1'>opacity .1\u003C\u002Fdiv>\n\u003C\u002Fdiv>",true,{"id":509,"language":505,"code":510,"is_editable":507},280,"\u003Cstyle>\n  body { font-family: sans-serif; padding: 16px; background: linear-gradient(135deg, #f59e0b, #ec4899); }\n  .box { display: inline-block; width: 200px; padding: 18px; margin: 8px; color: #fff; font-weight: bold; border-radius: 10px; }\n  .op { background: #000; opacity: .5; }\n  .alpha { background: rgb(0 0 0 \u002F 50%); }\n\u003C\u002Fstyle>\n\u003Cdiv class='box op'>opacity: .5 (text is faded too)\u003C\u002Fdiv>\n\u003Cdiv class='box alpha'>rgb alpha 50% (text stays sharp)\u003C\u002Fdiv>",{"id":512,"language":505,"code":513,"is_editable":507},281,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .card { position: relative; width: 240px; height: 150px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #38bdf8, #6366f1); }\n  .card .info { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(15 23 42 \u002F 80%); color: #fff; opacity: 0; transition: opacity .35s; }\n  .card:hover .info { opacity: 1; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Cdiv class='info'>Fade in on hover\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":515,"language":505,"code":516,"is_editable":507},282,"\u003Cstyle>\n  .stage { isolation: isolate; width: 320px; height: 170px; position: relative; background: #fde047; border-radius: 12px; overflow: hidden; }\n  .c { position: absolute; width: 120px; height: 120px; border-radius: 50%; }\n  .c1 { background: #ef4444; left: 30px; top: 25px; mix-blend-mode: multiply; }\n  .c2 { background: #3b82f6; left: 90px; top: 25px; mix-blend-mode: multiply; }\n  .c3 { background: #22c55e; left: 150px; top: 25px; mix-blend-mode: multiply; }\n\u003C\u002Fstyle>\n\u003Cdiv class='stage'>\u003Cdiv class='c c1'>\u003C\u002Fdiv>\u003Cdiv class='c c2'>\u003C\u002Fdiv>\u003Cdiv class='c c3'>\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":518,"language":505,"code":519,"is_editable":507},283,"\u003Cstyle>\n  .duo { height: 170px; max-width: 360px; border-radius: 12px; background-color: #7c3aed; background-image: linear-gradient(135deg, #fef08a, #16a34a 45%, #0f172a); background-blend-mode: multiply; margin-bottom: 14px; }\n  .diff { height: 120px; max-width: 360px; border-radius: 12px; background: linear-gradient(90deg, #fff 50%, #111 50%); display: grid; place-items: center; }\n  .diff h2 { margin: 0; font: 800 34px sans-serif; color: #fff; mix-blend-mode: difference; }\n\u003C\u002Fstyle>\n\u003Cdiv class='duo'>\u003C\u002Fdiv>\n\u003Cdiv class='diff'>\u003Ch2>Always Readable\u003C\u002Fh2>\u003C\u002Fdiv>",{"id":205,"slug":521,"title":522,"time_limit_seconds":5,"pass_percentage":303,"question_count":39},"opacity-blend-modes-quiz","Opacity & Blend Modes Quiz",[524,531],{"id":525,"title":526,"slug":527,"prompt":528,"starter_code":529,"expected_output":530,"language":505,"order_index":9},115,"Semi-transparent Banner With Sharp Text","semi-transparent-banner-alpha","The banner text becomes faded because opacity is used. Fix the CSS so the black background is 60% transparent but the white text stays fully sharp. Remove the opacity declaration.","\u003Cstyle>\n  body { background: linear-gradient(135deg, #f97316, #db2777); padding: 30px; font-family: sans-serif; }\n  .banner { background: #000; opacity: 0.6; color: #fff; padding: 20px; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='banner'>Sharp white text on a translucent black banner\u003C\u002Fdiv>","Translucent black banner with fully opaque white text.",{"id":532,"title":533,"slug":534,"prompt":535,"starter_code":536,"expected_output":537,"language":505,"order_index":23},116,"Duotone Effect With Blend Modes","duotone-blend-mode","Create a duotone look on .photo by combining a background-color (#0ea5e9) with the existing gradient image layer using background-blend-mode: multiply.","\u003Cstyle>\n  .photo { width: 320px; height: 180px; border-radius: 12px; background-image: linear-gradient(45deg, #fff, #94a3b8 50%, #0f172a); \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='photo'>\u003C\u002Fdiv>","The gradient is tinted with a blue color through multiply blending.","2026-09-29T18:57:10+00:00",{"id":387,"slug":389,"title":388},{"id":395,"slug":397,"title":396},{"data":542},[543,546,549,554,559],{"name":335,"slug":336,"description":544,"post_count":23,"subcategories":545},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":505,"description":547,"post_count":23,"subcategories":548},"Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":550,"slug":551,"description":552,"post_count":9,"subcategories":553},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":555,"slug":556,"description":557,"post_count":9,"subcategories":558},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":560,"slug":561,"description":562,"post_count":9,"subcategories":563},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[]]