Adding a CSS shadow to an element positioned beneath another

I'm attempting to recreate a shadow effect in HTML similar to one I created in Photoshop:

https://i.sstatic.net/fBcBl.png

I believe a basic HTML structure like the one below should suffice, but I'm unsure:

<div id="anotherMask">
  <div id="mask">  
    <div id="shadow">
        <div id="content">
            FOO
        </div>
    </div>
  </div>
</div>

I won't include the CSS here as it may make the question too lengthy. Here are two different approaches I've tried, but neither has worked as expected:

https://jsfiddle.net/tvhydm74/

I attempted using a div with a black border, transparent background, and blur filter on a layer beneath another, but it ended up filtering everything instead:

https://jsfiddle.net/6gbsejq4/

Any assistance would be greatly appreciated :)

htmlcssshadowbox-shadow

Answer №1

To create a shadow effect within an element, you can utilize the inset box-shadow:

.content {
  height: 100px;
  width: 100px;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: inset 3px 3px 7px 2px rgba(0, 0, 0, 0.75);
}

.container {
  display: inline-block;
  background: red;
  padding: 20px;
}
<div class="container">
  <div class="content">
    FOO
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to make a sub Post or page on WordPress

Seeking to add sub posts within my website's main posts. The URL structure for the main post will be: site.com/post-title I envision sub posts following this format: site.com/post-title/subpost1 site.com/post-title/subpost2 site.com/post-title/ ...

phphtmlwordpress

Is there a Pug file that can connect to a Websocket and show the incoming values?

Check out this basic pug file snippet: p Hello The back end consists of typical components such as node, express, passport, and sql. You can set up a route like this: app.get('/example', (request, response) => { response.render('exam ...

cssnode.jswebsocketreal-time-updates

Determining html column values using a related column and user input

Is there a way to populate an HTML table column (using Javascript or jQuery) based on the values in another column and an input field? For instance, if I input the number 115 into the field, then the advance column should display a value of 1 for each ath ...

javascriptjqueryhtml

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

When generating elements dynamically with JavaScript using document.createElement("p"), I am looking to create a paragraph element <p></p> that includes an anchor tag in the middle, creating a clickable link within the text. I aim to use JavaS ...

javascripthtml

javascript highchart image carousel

I am currently working on a visual chart project using the JavaScript library highchart. After setting up my chart with some dummy data, I am looking to incorporate functionality that allows for triggering an image slide based on the chart data. Specific ...

javascriptjqueryhtmlcsshighcharts

What could be the reason for the onClick event functioning only once in HTML?

Below is the code snippet containing both HTML and JavaScript. However, the issue I am facing is that the onclick event only seems to work for the first <li>. <!DOCTYPE html> <html> <body> <ul class="list"> <li ...

javascriptjqueryhtml

"Enhancing User Experience with Bootstrap's Smooth Transition Effects for fadeIn() and fade

As someone who is new to html and JavaScript, I have the following html code: <div class="row" > <button class="..." id="button"> ... </button> <div class="..." id="box"> ... </div> </di ...

javascriptjqueryhtmltwitter-bootstrap

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Ways to restrict the content div JSON display to only three items

Is it possible to limit the display of items from JSON in the content div to just three? The current code displays all downloaded items, but I want only 3 divs to be returned. <div id="p"></div> $.getJSON('element.json', function(d ...

javascriptjqueryhtmljson

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

The autosearch feature seems to be malfunctioning

I am currently working on implementing an autocomplete suggestion feature using the AutoComplete plugin from GitHub. I am using a combination of HTML, JavaScript, and CSS for this project. The functionality works perfectly when I hardcode the data in the f ...

javascriptjqueryhtmlarraysjson

Using Selenium to interact with drop-down lists using div tags instead of select tags

As a newcomer to automated testing using Selenium Web Driver, I am struggling to test drop down lists for the location type without relying on the select command. The element in question is enclosed within a div tag. I attempted sending keys but that meth ...

javascriptpythonhtmlseleniumweb-scraping

Stack div on top of div

It seems like I'm facing a simple problem that needs a solution. I have two container divs .topwrap{ position:relative; top:100px; background:#00C; } </i> and .lowerwrap{ position:relative; ...

htmlcssposition

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

javascripthtmlcssbootstrap-4

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

javascripthtmlreactjs

What's the reason for the icon not updating in the responsive mode?

I am venturing into the world of responsive web design for the first time. My aim is to create a website menu that drops down when the menu icon is clicked, using the onclick command in JavaScript. However, upon inspecting my browser, I noticed an uncaught ...

javascripthtmlcss

What is the best way to store all rows in a dynamically changing table with AngularJS?

I am facing an issue while trying to dynamically add rows for a variable that is a String array in my database. The problem is that it only saves the last value entered in the row instead of saving all of them in an array. Here is my current view code: &l ...

javascripthtmlangularjs

What is the best way to verify reCAPTCHA v2 on an HTML website?

The code I'm using is giving me an error when the page loads: Cannot connect to reCAPTCHA. Please check your connection and try again. Just a reminder, I won't be incorporating any server-side code on my website. It's a simple HTML setup ...

jqueryhtmlrecaptcha

CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually. ...

jquerycssanimation