{"id":4900,"date":"2022-06-03T12:01:37","date_gmt":"2022-06-03T12:01:37","guid":{"rendered":"https:\/\/www.liainfraservices.com\/blog\/?p=4900"},"modified":"2022-08-18T05:46:50","modified_gmt":"2022-08-18T05:46:50","slug":"how-to-do-css-box-style-shadow-effect","status":"publish","type":"post","link":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/","title":{"rendered":"How to do CSS ‘Box Style’ Shadow Effect?"},"content":{"rendered":"<\/span> 4<\/span> min read<\/span><\/span>
<\/span> 4,063<\/span><\/div>\n

Home<\/mark> <\/a>> Web App Development Company in Chennai<\/a> <\/mark><\/strong><\/p>\n\n\n\n

The box-shadow CSS Box Shadow property adds shadow effects around an element’s frame. Lia Infraservices the leading Mobile & Web App Development Company in Chennai<\/a><\/mark><\/strong> & the popular Web & Mobile App development company in Chennai<\/a><\/mark><\/strong> <\/a>can help you set multiple box effects separated by commas. Basically a box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.<\/p>\n\n\n\n

The box-shadow property attaches one or more shadows to an element.<\/p>\n\n\n\n

What is CSS Box Shadow Model?<\/strong><\/p>\n\n\n\n

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. <\/p>\n\n\n\n

CSS box model typically describes how these rectangular boxes are laid out on a web page. <\/p>\n\n\n\n

These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.<\/p>\n\n\n\n

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determine how much space an element can take on a web page.<\/p>\n\n\n\n

\"CSS<\/figure>\n\n\n\n

How to use CSS3 Drop Shadows:<\/strong><\/p>\n\n\n\n

The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop without using any images. Prior to CSS3, sliced images are used for creating the shadows around the elements that was quite annoying.<\/p>\n\n\n\n

CSS3 box-shadow Property:<\/strong><\/p>\n\n\n\n

The box-shadow property can be used to add shadow to the element’s boxes. You can even apply more than one shadow effect using a comma-separated list of shadows. <\/p>\n\n\n\n

The basic syntax of creating a box shadow can be given with:<\/p>\n\n\n\n

Syntax: <\/strong><\/p>\n\n\n\n

box-shadow: offset-x offset-y blur-radius color;<\/p>\n\n\n\n

The components of the box-shadow property have the following meaning:<\/p>\n\n\n\n

offset-x <\/strong>\u2014 Sets the horizontal offset of the shadow.<\/p>\n\n\n\n

offset-y <\/strong>\u2014 Sets the vertical offset of the shadow.<\/p>\n\n\n\n

blur-radius<\/strong> \u2014 Sets the blur radius. The larger the value, the bigger the blur and more the shadow’s edge will be blurred. Negative values are not allowed.<\/p>\n\n\n\n

color<\/strong> \u2014 Sets the color of the shadow. If the color value is omitted or not specified, it takes the value of the color property.<\/p>\n\n\n\n

Try It Yourself:<\/em><\/p>\n\n\n\n

 The basic box shadow consists of six different properties i.e.  inset, left, top, blur, size, and color. <\/p>\n\n\n\n

CSS Demo: box-shadow<\/strong><\/h4>\n\n\n\n
  1. box-shadow: 10px 5px 5px red;<\/li><\/ol>\n\n\n\n
    \"Bottom<\/figure>\n\n\n\n
    1. box-shadow: 60px -16px teal;<\/li><\/ol>\n\n\n\n
      \"box-shadow:<\/figure>\n\n\n\n
      1. box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);<\/li><\/ol>\n\n\n\n
        \"box-shadow:<\/figure>\n\n\n\n
        1. box-shadow: inset 5em 1em gold;<\/li><\/ol>\n\n\n\n
          \"box-shadow:<\/figure>\n\n\n\n
          1. box-shadow: 3px 3px red, -1em 0 .4em olive;<\/li><\/ol>\n\n\n\n
            \"box-shadow:<\/figure>\n\n\n\n

            Note: When adding the box-shadow, if the value for the blur-radius component is not specified, or set to zero (0), the edges of the shadow will be sharp.<\/p>\n\n\n\n

            How to do Multiple CSS box Shadow Effect?<\/strong><\/p>\n\n\n\n

            \"How<\/figure>\n\n\n\n

             Developers can also create a pop up or layering effect using the CSS3 box shadow effect. To do so use the multiple box shadow property or the text shadow property on the site\u2019s elements. The first time the effect is used, it will appear on the top of the element. When the rest of the effects are applied, it will go on stacking up gradually giving the element a pop up or some pretty creative effects which depend on the various styles depending on how they are applied. When applying the CSS3 box shadow to an element, it will stop when it reaches the end of the element. This feature is particularly helpful when trying to create a shadow effect over a white or monochromatic background.<\/p>\n\n\n\n

            Conclusion:<\/strong><\/p>\n\n\n\n

            Check out all the amazing effects using CSS3 Box Shadows and let us know which one is your favourite.<\/p>\n\n\n\n

            For more css box shadow effects check this out: https:\/\/getcssscan.com\/css-box-shadow-examples<\/a><\/p>\n\n\n\n

            Contact Lia Infraservices<\/a><\/mark><\/strong>, the leading Mobile & Web app Development Company in Chennai<\/a><\/mark><\/strong> and the popular Android & ios Mobile App Development Company in Saudi Arabia<\/a><\/strong><\/mark>. Is experts in creating amazing UI\/UX designs with eye appealing box shadows for the mobile \/web app button with CSS Box Shadow property.<\/p>\n\n\n

            android app development company in chennai<\/a>|<\/span>android app development in saudi arabia<\/a>|<\/span>CSS3 box style shadow property<\/a>|<\/span>ios app development company in chennai<\/a>|<\/span>iOS App Development in Saudi Arabia<\/a>|<\/span>mobile app development company in chennai<\/a>|<\/span>Mobile App Development in Saudi Arabia<\/a>|<\/span>Mobile Application Development Company<\/a>|<\/span>Web Application Development<\/a>|<\/span>website design & development<\/a><\/div>","protected":false},"excerpt":{"rendered":"

            <\/span> 4<\/span> min read<\/span><\/span>4,063 Home > Web App Development Company in Chennai The box-shadow CSS Box Shadow property adds shadow effects around an element’s frame. Lia Infraservices the leading Mobile & Web App<\/p>\n","protected":false},"author":1,"featured_media":4903,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[236],"tags":[886,944,961,887,943,826,941,690,210,27],"class_list":["post-4900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-application","tag-android-app-development-company-in-chennai","tag-android-app-development-in-saudi-arabia","tag-css3-box-style-shadow-property","tag-ios-app-development-company-in-chennai","tag-ios-app-development-in-saudi-arabia","tag-mobile-app-development-company-in-chennai","tag-mobile-app-development-in-saudi-arabia","tag-mobile-application-development-company","tag-web-application-development","tag-website-design-development"],"yoast_head":"\nHow to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices<\/title>\n<meta name=\"description\" content=\"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices\" \/>\n<meta property=\"og:description\" content=\"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | Liainfraservices\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-03T12:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-18T05:46:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Partho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Partho\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/\"},\"author\":{\"name\":\"Partho\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/person\\\/b5a729cb152dd3bc7f07550ca9d223e4\"},\"headline\":\"How to do CSS ‘Box Style’ Shadow Effect?\",\"datePublished\":\"2022-06-03T12:01:37+00:00\",\"dateModified\":\"2022-08-18T05:46:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/\"},\"wordCount\":667,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg\",\"keywords\":[\"android app development company in chennai\",\"android app development in saudi arabia\",\"CSS3 box style shadow property\",\"ios app development company in chennai\",\"iOS App Development in Saudi Arabia\",\"mobile app development company in chennai\",\"Mobile App Development in Saudi Arabia\",\"Mobile Application Development Company\",\"Web Application Development\",\"website design & development\"],\"articleSection\":[\"Web Application\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/\",\"name\":\"How to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg\",\"datePublished\":\"2022-06-03T12:01:37+00:00\",\"dateModified\":\"2022-08-18T05:46:50+00:00\",\"description\":\"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg\",\"contentUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg\",\"width\":512,\"height\":315,\"caption\":\"CSS box shadow effect\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/how-to-do-css-box-style-shadow-effect\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Application\",\"item\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/category\\\/web-application\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to do CSS ‘Box Style’ Shadow Effect?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\",\"name\":\"Blog | Liainfraservices\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#organization\",\"name\":\"Blog | Liainfraservices\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/lia-logo-b-e1635340384244.png\",\"contentUrl\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/lia-logo-b-e1635340384244.png\",\"width\":308,\"height\":96,\"caption\":\"Blog | Liainfraservices\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.liainfraservices.com\\\/blog\\\/#\\\/schema\\\/person\\\/b5a729cb152dd3bc7f07550ca9d223e4\",\"name\":\"Partho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g\",\"caption\":\"Partho\"},\"description\":\"Partho Das, founder of Lia Infraservices, has 15+ years of expertise in cloud solutions, DevOps, and infrastructure security. He provides consultation on architecture planning, DevOps setup, Kubernetes, and cloud migrations. Partho holds multiple AWS and Azure certifications, along with CISCO CCNA & CCNP. Connect on LinkedIn\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/partho-dev\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices","description":"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/","og_locale":"en_US","og_type":"article","og_title":"How to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices","og_description":"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.","og_url":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/","og_site_name":"Blog | Liainfraservices","article_published_time":"2022-06-03T12:01:37+00:00","article_modified_time":"2022-08-18T05:46:50+00:00","og_image":[{"width":512,"height":315,"url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg","type":"image\/jpeg"}],"author":"Partho","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Partho","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#article","isPartOf":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/"},"author":{"name":"Partho","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/person\/b5a729cb152dd3bc7f07550ca9d223e4"},"headline":"How to do CSS ‘Box Style’ Shadow Effect?","datePublished":"2022-06-03T12:01:37+00:00","dateModified":"2022-08-18T05:46:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/"},"wordCount":667,"commentCount":0,"publisher":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg","keywords":["android app development company in chennai","android app development in saudi arabia","CSS3 box style shadow property","ios app development company in chennai","iOS App Development in Saudi Arabia","mobile app development company in chennai","Mobile App Development in Saudi Arabia","Mobile Application Development Company","Web Application Development","website design & development"],"articleSection":["Web Application"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/","url":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/","name":"How to do CSS 'Box Style' Shadow Effect? - Blog | Liainfraservices","isPartOf":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#primaryimage"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg","datePublished":"2022-06-03T12:01:37+00:00","dateModified":"2022-08-18T05:46:50+00:00","description":"Add shadow effect to your buttons in mobile and web app development check out CSS box style shadow effects by Lia Infraservices.","breadcrumb":{"@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#primaryimage","url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg","contentUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Do-CSS-Box-Style-Shadow-Effect.jpg","width":512,"height":315,"caption":"CSS box shadow effect"},{"@type":"BreadcrumbList","@id":"https:\/\/www.liainfraservices.com\/blog\/how-to-do-css-box-style-shadow-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.liainfraservices.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Application","item":"https:\/\/www.liainfraservices.com\/blog\/category\/web-application\/"},{"@type":"ListItem","position":3,"name":"How to do CSS ‘Box Style’ Shadow Effect?"}]},{"@type":"WebSite","@id":"https:\/\/www.liainfraservices.com\/blog\/#website","url":"https:\/\/www.liainfraservices.com\/blog\/","name":"Blog | Liainfraservices","description":"","publisher":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.liainfraservices.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.liainfraservices.com\/blog\/#organization","name":"Blog | Liainfraservices","url":"https:\/\/www.liainfraservices.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/lia-logo-b-e1635340384244.png","contentUrl":"https:\/\/www.liainfraservices.com\/blog\/wp-content\/uploads\/2021\/10\/lia-logo-b-e1635340384244.png","width":308,"height":96,"caption":"Blog | Liainfraservices"},"image":{"@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.liainfraservices.com\/blog\/#\/schema\/person\/b5a729cb152dd3bc7f07550ca9d223e4","name":"Partho","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c5fc8918cc5dbc844eccbeaaf854eef27d2c79ab17ff0022304f712805d6959?s=96&d=mm&r=g","caption":"Partho"},"description":"Partho Das, founder of Lia Infraservices, has 15+ years of expertise in cloud solutions, DevOps, and infrastructure security. He provides consultation on architecture planning, DevOps setup, Kubernetes, and cloud migrations. Partho holds multiple AWS and Azure certifications, along with CISCO CCNA & CCNP. Connect on LinkedIn","sameAs":["https:\/\/www.linkedin.com\/in\/partho-dev\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/4900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/comments?post=4900"}],"version-history":[{"count":8,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/4900\/revisions"}],"predecessor-version":[{"id":5019,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/posts\/4900\/revisions\/5019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/media\/4903"}],"wp:attachment":[{"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/media?parent=4900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/categories?post=4900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.liainfraservices.com\/blog\/wp-json\/wp\/v2\/tags?post=4900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}