[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-box-shadow-text-shadow":458},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","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":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"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.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"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.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"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",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"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.",[365,390,422],{"id":101,"name":366,"slug":367,"order_index":368,"topics":369},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[370,374,378,382,386],{"id":371,"title":372,"slug":373,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":375,"title":376,"slug":377,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":379,"title":380,"slug":381,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":383,"title":384,"slug":385,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":387,"title":388,"slug":389,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":113,"name":391,"slug":392,"order_index":368,"topics":393},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[394,398,402,406,410,414,418],{"id":395,"title":396,"slug":397,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":399,"title":400,"slug":401,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":403,"title":404,"slug":405,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":407,"title":408,"slug":409,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":411,"title":412,"slug":413,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":415,"title":416,"slug":417,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":419,"title":420,"slug":421,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":105,"name":423,"slug":424,"order_index":368,"topics":425},"Selectors & the Cascade","selectors-the-cascade",[426,430,434,438,442,446,450,454],{"id":427,"title":428,"slug":429,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":431,"title":432,"slug":433,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":435,"title":436,"slug":437,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":439,"title":440,"slug":441,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":443,"title":444,"slug":445,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":447,"title":448,"slug":449,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":451,"title":452,"slug":453,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":455,"title":456,"slug":457,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":459},{"id":411,"title":412,"slug":413,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":69,"cornerstone":52,"schema_type":469,"faq_json":5,"video_url":5,"canonical_url":470,"meta_title":471,"meta_description":472,"og_image":5,"toc_json":473,"code_examples":522,"quiz":539,"exercises":542,"published_at":5,"updated_at":557,"prev":558,"next":559},"\u003Ch2 id=\"what-are-css-box-shadow-and-text-shadow\">What Are CSS Box Shadow and Text Shadow?\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS box-shadow\u003C\u002Fstrong> property draws one or more shadows around an element's box, while \u003Cstrong>text-shadow\u003C\u002Fstrong> adds shadows to the letters of text. Shadows create depth, elevation, focus and glow effects without images. Our focus keyword is \u003Cstrong>CSS box shadow\u003C\u002Fstrong>, and this lesson also covers trending searches: CSS text-shadow examples, layered realistic shadows, inset shadow, neumorphism, neon glow effect, material design elevation, box-shadow vs drop-shadow, and box-shadow performance.\u003C\u002Fp>\u003Ch2 id=\"1-box-shadow-syntax\">1. box-shadow Syntax\u003C\u002Fh2>\u003Cpre>\u003Ccode>box-shadow: offset-x offset-y blur-radius spread-radius color;\nbox-shadow: 0 4px 12px 0 rgb(0 0 0 \u002F 20%);\nbox-shadow: inset 0 2px 6px rgb(0 0 0 \u002F 30%);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cul>\u003Cli>\u003Cstrong>offset-x\u003C\u002Fstrong> (required): horizontal distance. Positive moves right.\u003C\u002Fli>\u003Cli>\u003Cstrong>offset-y\u003C\u002Fstrong> (required): vertical distance. Positive moves down.\u003C\u002Fli>\u003Cli>\u003Cstrong>blur-radius\u003C\u002Fstrong> (optional, default 0): larger value gives a softer, more spread out edge. It cannot be negative.\u003C\u002Fli>\u003Cli>\u003Cstrong>spread-radius\u003C\u002Fstrong> (optional, default 0): grows (positive) or shrinks (negative) the shadow size.\u003C\u002Fli>\u003Cli>\u003Cstrong>color\u003C\u002Fstrong> (optional): defaults to \u003Ccode>currentColor\u003C\u002Fcode>. Use semi-transparent colors for natural results.\u003C\u002Fli>\u003Cli>\u003Cstrong>inset\u003C\u002Fstrong> (optional keyword): draws the shadow inside the box instead of outside.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-multiple-shadows\">2. Multiple Shadows\u003C\u002Fh2>\u003Cp>Separate shadows with commas. The \u003Cstrong>first shadow is on top\u003C\u002Fstrong>. Layering several soft shadows looks much more realistic than one big shadow.\u003C\u002Fp>\u003Cpre>\u003Ccode>.card {\n  box-shadow:\n    0 1px 1px rgb(0 0 0 \u002F 8%),\n    0 2px 2px rgb(0 0 0 \u002F 8%),\n    0 4px 4px rgb(0 0 0 \u002F 8%),\n    0 8px 8px rgb(0 0 0 \u002F 8%),\n    0 16px 16px rgb(0 0 0 \u002F 8%);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"3-elevation-system-design-tokens\">3. Elevation System (Design Tokens)\u003C\u002Fh2>\u003Cp>Store shadows as custom properties so the whole site uses consistent depth: \u003Ccode>--shadow-sm\u003C\u002Fcode>, \u003Ccode>--shadow-md\u003C\u002Fcode>, \u003Ccode>--shadow-lg\u003C\u002Fcode>. Higher elements (modals, dropdowns) get bigger offsets and blur; low elements (cards, buttons) get small ones.\u003C\u002Fp>\u003Ch2 id=\"4-popular-box-shadow-effects\">4. Popular Box Shadow Effects\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Soft card shadow:\u003C\u002Fstrong> \u003Ccode>0 10px 30px -10px rgb(0 0 0 \u002F 25%)\u003C\u002Fcode> (negative spread keeps it tight).\u003C\u002Fli>\u003Cli>\u003Cstrong>Ring outline:\u003C\u002Fstrong> \u003Ccode>0 0 0 3px #2563eb\u003C\u002Fcode> (zero blur, spread only). Great for focus states.\u003C\u002Fli>\u003Cli>\u003Cstrong>Glow:\u003C\u002Fstrong> \u003Ccode>0 0 20px #22d3ee\u003C\u002Fcode> for neon and hover effects.\u003C\u002Fli>\u003Cli>\u003Cstrong>Inset depth:\u003C\u002Fstrong> \u003Ccode>inset 0 2px 4px rgb(0 0 0 \u002F 25%)\u003C\u002Fcode> for pressed buttons and input fields.\u003C\u002Fli>\u003Cli>\u003Cstrong>Neumorphism:\u003C\u002Fstrong> a light shadow and a dark shadow on the same background: \u003Ccode>8px 8px 16px #bebebe, -8px -8px 16px #ffffff\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>One-sided shadow:\u003C\u002Fstrong> use a negative spread with an offset, so only one edge shows.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-text-shadow\">5. text-shadow\u003C\u002Fh2>\u003Cpre>\u003Ccode>text-shadow: offset-x offset-y blur-radius color;\ntext-shadow: 2px 2px 4px rgb(0 0 0 \u002F 40%);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>text-shadow\u003C\u002Fcode> works like box-shadow but has \u003Cstrong>no spread\u003C\u002Fstrong> and \u003Cstrong>no inset\u003C\u002Fstrong>. It follows the shape of each glyph. Multiple shadows are allowed, which enables outlines, glows and 3D or retro text.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Readability on images:\u003C\u002Fstrong> \u003Ccode>0 1px 3px rgb(0 0 0 \u002F 60%)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Neon glow:\u003C\u002Fstrong> stack several shadows with growing blur: \u003Ccode>0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #f0f\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Text outline:\u003C\u002Fstrong> four shadows with 1px offsets in each direction (or use \u003Ccode>-webkit-text-stroke\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>\u003Cstrong>Letterpress:\u003C\u002Fstrong> a light shadow 1px below dark text.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-box-shadow-vs-filter-drop-shadow\">6. box-shadow vs filter: drop-shadow()\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003C\u002Fth>\u003Cth>box-shadow\u003C\u002Fth>\u003Cth>filter: drop-shadow()\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Follows\u003C\u002Ftd>\u003Ctd>The rectangular box (with border-radius)\u003C\u002Ftd>\u003Ctd>The actual visible shape, including transparent PNG\u002FSVG areas\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Spread and inset\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Multiple shadows\u003C\u002Ftd>\u003Ctd>Comma separated list\u003C\u002Ftd>\u003Ctd>Chain several drop-shadow() functions\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Performance\u003C\u002Ftd>\u003Ctd>Lighter\u003C\u002Ftd>\u003Ctd>Heavier\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>Use \u003Ccode>drop-shadow\u003C\u002Fcode> for transparent images, icons, speech-bubble tails, and clipped shapes (\u003Ccode>clip-path\u003C\u002Fcode> cuts box-shadow away, but a drop-shadow on a parent works).\u003C\u002Fp>\u003Ch2 id=\"7-performance-tips\">7. Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Large blur values on many elements cost paint time.\u003C\u002Fli>\u003Cli>Do not animate \u003Ccode>box-shadow\u003C\u002Fcode> directly on many elements. Instead, put the big shadow on a \u003Ccode>::after\u003C\u002Fcode> pseudo-element and animate its \u003Ccode>opacity\u003C\u002Fcode>, which is GPU friendly.\u003C\u002Fli>\u003Cli>Use fewer layers on mobile lists.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"8-accessibility\">8. Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>Shadows are ignored in \u003Cstrong>forced-colors (Windows high contrast)\u003C\u002Fstrong> mode. Never use a box-shadow ring as the only focus indicator. Add \u003Ccode>outline: 2px solid transparent;\u003C\u002Fcode> so a visible outline appears in that mode.\u003C\u002Fli>\u003Cli>Keep enough contrast between text and its background when using text-shadow for readability, and never rely on the shadow alone.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use low-opacity black or a darker tint of the background color for natural shadows.\u003C\u002Fli>\u003Cli>Use layered shadows and design tokens for consistent elevation.\u003C\u002Fli>\u003Cli>Match shadow direction across the whole page (light from the top).\u003C\u002Fli>\u003Cli>Use negative spread to avoid shadows that look too large.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using pure black at full opacity, which looks harsh.\u003C\u002Fli>\u003Cli>Negative blur values, which are invalid.\u003C\u002Fli>\u003Cli>Expecting box-shadow to affect layout. It does not take space and can be clipped by \u003Ccode>overflow: hidden\u003C\u002Fcode> on a parent.\u003C\u002Fli>\u003Cli>Forgetting that box-shadow follows \u003Ccode>border-radius\u003C\u002Fcode> but not \u003Ccode>clip-path\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Box-shadow adds depth to boxes, text-shadow styles letters, and drop-shadow follows real shapes. Use layered soft shadows, design tokens and pseudo-element animation to get beautiful and fast results. Practice with the editable examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; background: #f1f5f9; padding: 20px; }\n  .b { display: inline-block; width: 120px; height: 80px; margin: 14px; background: #fff; border-radius: 10px; text-align: center; line-height: 80px; font-size: 13px; }\n  .s1 { box-shadow: 4px 4px 0 #94a3b8; }\n  .s2 { box-shadow: 0 6px 16px rgb(0 0 0 \u002F 20%); }\n  .s3 { box-shadow: 0 0 0 4px #2563eb; }\n  .s4 { box-shadow: inset 0 3px 8px rgb(0 0 0 \u002F 30%); }\n<\u002Fstyle>\n<div class='b s1'>hard offset<\u002Fdiv><div class='b s2'>soft blur<\u002Fdiv><div class='b s3'>ring (spread)<\u002Fdiv><div class='b s4'>inset<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; background: #f8fafc; padding: 24px; }\n  .card { max-width: 260px; padding: 20px; margin: 12px; display: inline-block; background: #fff; border-radius: 14px; transition: box-shadow .3s, transform .3s; }\n  .single { box-shadow: 0 16px 16px rgb(0 0 0 \u002F 25%); }\n  .layered { box-shadow: 0 1px 1px rgb(0 0 0 \u002F 8%), 0 2px 2px rgb(0 0 0 \u002F 8%), 0 4px 4px rgb(0 0 0 \u002F 8%), 0 8px 8px rgb(0 0 0 \u002F 8%), 0 16px 16px rgb(0 0 0 \u002F 8%); }\n  .layered:hover { transform: translateY(-4px); }\n<\u002Fstyle>\n<div class='card single'>One heavy shadow<\u002Fdiv>\n<div class='card layered'>Layered, realistic shadow (hover me)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --sh-sm: 0 1px 3px rgb(0 0 0 \u002F 15%); --sh-md: 0 6px 16px rgb(0 0 0 \u002F 18%); --sh-lg: 0 20px 40px -8px rgb(0 0 0 \u002F 30%); }\n  body { font-family: sans-serif; background: #e2e8f0; padding: 24px; }\n  .e { display: inline-block; width: 110px; padding: 24px 8px; margin: 12px; background: #fff; border-radius: 10px; text-align: center; }\n  .sm { box-shadow: var(--sh-sm); } .md { box-shadow: var(--sh-md); } .lg { box-shadow: var(--sh-lg); }\n<\u002Fstyle>\n<div class='e sm'>--sh-sm<\u002Fdiv><div class='e md'>--sh-md<\u002Fdiv><div class='e lg'>--sh-lg<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { background: #0f172a; font-family: sans-serif; padding: 24px; }\n  .neon { font-size: 44px; font-weight: 800; color: #fff; text-shadow: 0 0 5px #fff, 0 0 12px #22d3ee, 0 0 24px #22d3ee, 0 0 48px #22d3ee; margin: 0 0 20px; }\n  .retro { font-size: 44px; font-weight: 800; color: #fde047; text-shadow: 3px 3px 0 #ef4444, 6px 6px 0 #7c3aed; margin: 0 0 20px; }\n  .outline { font-size: 44px; font-weight: 800; color: #0f172a; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin: 0; }\n<\u002Fstyle>\n<h1 class='neon'>Neon Glow<\u002Fh1><h1 class='retro'>Retro 3D<\u002Fh1><h1 class='outline'>Outlined<\u002Fh1>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; padding: 24px; background: #e0e5ec; }\n  .neo { display: inline-block; padding: 30px 40px; margin: 16px; border-radius: 18px; background: #e0e5ec; color: #475569; }\n  .out { box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; }\n  .in { box-shadow: inset 8px 8px 16px #b8bec7, inset -8px -8px 16px #ffffff; }\n  .png { display: inline-block; width: 90px; height: 90px; margin: 16px; background: #f59e0b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }\n  .wrap { display: inline-block; filter: drop-shadow(6px 8px 6px rgb(0 0 0 \u002F 40%)); }\n<\u002Fstyle>\n<div class='neo out'>Neumorphic raised<\u002Fdiv><div class='neo in'>Neumorphic pressed<\u002Fdiv>\n<div class='wrap'><div class='png'><\u002Fdiv><\u002Fdiv> drop-shadow follows the triangle shape\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":391,"slug":392},{"slug":464,"display_name":465,"job_title":5,"short_bio":5,"expertise_tags":466,"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":467,"posts":468},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-box-shadow-text-shadow","CSS Box Shadow & Text Shadow Complete Guide","Learn CSS box-shadow and text-shadow: syntax, inset, multiple layered shadows, glow, neumorphism, drop-shadow and performance tips.",[474,478,482,486,490,494,498,502,506,510,514,518],{"id":475,"text":476,"level":12,"children":477},"what-are-css-box-shadow-and-text-shadow","What Are CSS Box Shadow and Text Shadow?",[],{"id":479,"text":480,"level":12,"children":481},"1-box-shadow-syntax","1. box-shadow Syntax",[],{"id":483,"text":484,"level":12,"children":485},"2-multiple-shadows","2. Multiple Shadows",[],{"id":487,"text":488,"level":12,"children":489},"3-elevation-system-design-tokens","3. Elevation System (Design Tokens)",[],{"id":491,"text":492,"level":12,"children":493},"4-popular-box-shadow-effects","4. Popular Box Shadow Effects",[],{"id":495,"text":496,"level":12,"children":497},"5-text-shadow","5. text-shadow",[],{"id":499,"text":500,"level":12,"children":501},"6-box-shadow-vs-filter-drop-shadow","6. box-shadow vs filter: drop-shadow()",[],{"id":503,"text":504,"level":12,"children":505},"7-performance-tips","7. Performance Tips",[],{"id":507,"text":508,"level":12,"children":509},"8-accessibility","8. Accessibility",[],{"id":511,"text":512,"level":12,"children":513},"best-practices","Best Practices",[],{"id":515,"text":516,"level":12,"children":517},"common-mistakes","Common Mistakes",[],{"id":519,"text":520,"level":12,"children":521},"summary","Summary",[],[523,527,530,533,536],{"id":524,"language":16,"code":525,"is_editable":526},274,"\u003Cstyle>\n  body { font-family: sans-serif; background: #f1f5f9; padding: 20px; }\n  .b { display: inline-block; width: 120px; height: 80px; margin: 14px; background: #fff; border-radius: 10px; text-align: center; line-height: 80px; font-size: 13px; }\n  .s1 { box-shadow: 4px 4px 0 #94a3b8; }\n  .s2 { box-shadow: 0 6px 16px rgb(0 0 0 \u002F 20%); }\n  .s3 { box-shadow: 0 0 0 4px #2563eb; }\n  .s4 { box-shadow: inset 0 3px 8px rgb(0 0 0 \u002F 30%); }\n\u003C\u002Fstyle>\n\u003Cdiv class='b s1'>hard offset\u003C\u002Fdiv>\u003Cdiv class='b s2'>soft blur\u003C\u002Fdiv>\u003Cdiv class='b s3'>ring (spread)\u003C\u002Fdiv>\u003Cdiv class='b s4'>inset\u003C\u002Fdiv>",true,{"id":528,"language":16,"code":529,"is_editable":526},275,"\u003Cstyle>\n  body { font-family: sans-serif; background: #f8fafc; padding: 24px; }\n  .card { max-width: 260px; padding: 20px; margin: 12px; display: inline-block; background: #fff; border-radius: 14px; transition: box-shadow .3s, transform .3s; }\n  .single { box-shadow: 0 16px 16px rgb(0 0 0 \u002F 25%); }\n  .layered { box-shadow: 0 1px 1px rgb(0 0 0 \u002F 8%), 0 2px 2px rgb(0 0 0 \u002F 8%), 0 4px 4px rgb(0 0 0 \u002F 8%), 0 8px 8px rgb(0 0 0 \u002F 8%), 0 16px 16px rgb(0 0 0 \u002F 8%); }\n  .layered:hover { transform: translateY(-4px); }\n\u003C\u002Fstyle>\n\u003Cdiv class='card single'>One heavy shadow\u003C\u002Fdiv>\n\u003Cdiv class='card layered'>Layered, realistic shadow (hover me)\u003C\u002Fdiv>",{"id":531,"language":16,"code":532,"is_editable":526},276,"\u003Cstyle>\n  :root { --sh-sm: 0 1px 3px rgb(0 0 0 \u002F 15%); --sh-md: 0 6px 16px rgb(0 0 0 \u002F 18%); --sh-lg: 0 20px 40px -8px rgb(0 0 0 \u002F 30%); }\n  body { font-family: sans-serif; background: #e2e8f0; padding: 24px; }\n  .e { display: inline-block; width: 110px; padding: 24px 8px; margin: 12px; background: #fff; border-radius: 10px; text-align: center; }\n  .sm { box-shadow: var(--sh-sm); } .md { box-shadow: var(--sh-md); } .lg { box-shadow: var(--sh-lg); }\n\u003C\u002Fstyle>\n\u003Cdiv class='e sm'>--sh-sm\u003C\u002Fdiv>\u003Cdiv class='e md'>--sh-md\u003C\u002Fdiv>\u003Cdiv class='e lg'>--sh-lg\u003C\u002Fdiv>",{"id":534,"language":16,"code":535,"is_editable":526},277,"\u003Cstyle>\n  body { background: #0f172a; font-family: sans-serif; padding: 24px; }\n  .neon { font-size: 44px; font-weight: 800; color: #fff; text-shadow: 0 0 5px #fff, 0 0 12px #22d3ee, 0 0 24px #22d3ee, 0 0 48px #22d3ee; margin: 0 0 20px; }\n  .retro { font-size: 44px; font-weight: 800; color: #fde047; text-shadow: 3px 3px 0 #ef4444, 6px 6px 0 #7c3aed; margin: 0 0 20px; }\n  .outline { font-size: 44px; font-weight: 800; color: #0f172a; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin: 0; }\n\u003C\u002Fstyle>\n\u003Ch1 class='neon'>Neon Glow\u003C\u002Fh1>\u003Ch1 class='retro'>Retro 3D\u003C\u002Fh1>\u003Ch1 class='outline'>Outlined\u003C\u002Fh1>",{"id":537,"language":16,"code":538,"is_editable":526},278,"\u003Cstyle>\n  body { font-family: sans-serif; padding: 24px; background: #e0e5ec; }\n  .neo { display: inline-block; padding: 30px 40px; margin: 16px; border-radius: 18px; background: #e0e5ec; color: #475569; }\n  .out { box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; }\n  .in { box-shadow: inset 8px 8px 16px #b8bec7, inset -8px -8px 16px #ffffff; }\n  .png { display: inline-block; width: 90px; height: 90px; margin: 16px; background: #f59e0b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }\n  .wrap { display: inline-block; filter: drop-shadow(6px 8px 6px rgb(0 0 0 \u002F 40%)); }\n\u003C\u002Fstyle>\n\u003Cdiv class='neo out'>Neumorphic raised\u003C\u002Fdiv>\u003Cdiv class='neo in'>Neumorphic pressed\u003C\u002Fdiv>\n\u003Cdiv class='wrap'>\u003Cdiv class='png'>\u003C\u002Fdiv>\u003C\u002Fdiv> drop-shadow follows the triangle shape",{"id":226,"slug":540,"title":541,"time_limit_seconds":5,"pass_percentage":329,"question_count":65},"box-text-shadow-quiz","Box Shadow & Text Shadow Quiz",[543,550],{"id":544,"title":545,"slug":546,"prompt":547,"starter_code":548,"expected_output":549,"language":16,"order_index":23},113,"Design an Elevated Card With Hover","elevated-card-hover-shadow","Style .card with a white background, 12px radius and a soft layered shadow (at least two shadows). On hover, lift it 4px using transform and make the shadow larger. Add a smooth transition.","\u003Cstyle>\n  body { background: #f1f5f9; padding: 30px; font-family: sans-serif; }\n  .card { width: 240px; padding: 20px; \u002F* your code *\u002F }\n  .card:hover { \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>Hover over this card\u003C\u002Fdiv>","A white card with a soft shadow that lifts and grows on hover.",{"id":551,"title":552,"slug":553,"prompt":554,"starter_code":555,"expected_output":556,"language":16,"order_index":12},114,"Create a Neon Text Effect","neon-text-effect","On a dark background, make the h1 white with a pink neon glow using at least three text-shadow layers with increasing blur.","\u003Cstyle>\n  body { background: #0b0b1a; padding: 40px; }\n  h1 { font: 800 56px sans-serif; color: #fff; \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Ch1>NEON SIGN\u003C\u002Fh1>","White text surrounded by a soft pink glow.","2026-09-29T18:57:10+00:00",{"id":407,"slug":409,"title":408},{"id":415,"slug":417,"title":416}]