Is there a way to create a shadow effect using css?

I am attempting to replicate the subtle shadow effect displayed in the image.

https://i.sstatic.net/fa7iB.png https://i.sstatic.net/YgY0W.png

Struggling with implementing this shadow effect using CSS. I experimented with box-shadow:

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

resulting in: https://i.sstatic.net/5yqm8.png The outcome is not quite what I'm aiming for. How can I achieve that subtle shadow effect?

htmlcss

Answer №1

Check out this demonstration: https://jsfiddle.net/sdz6p4qf/

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

Here is the CSS code snippet:

body {
  background-color: #CCC;
}
.rect {
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
  background-color: #FFF;
}

I made adjustments to increase the blur radius and offset Y.

Answer №2

Give this a try. It's a simple technique that allows you to customize things like rounded corners and shadow opacity.

div.shadow {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}
<div class="shadow">
  <p class="caption">This is a sample text box. </p>
    <p class="caption">This is a sample text box. </p>
  <p class="caption">This is a sample text box. </p>

</div>

Answer №3

Give this a shot:

-webkit-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);

Answer №4

Give this CSS code a shot:

-webkit-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75)

Answer №5

Check out the solutions I have provided:

Solution 1

.a1{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
}
.b1{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
}



Solution 2

.a2 {
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);

}

.b2{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);

}



Solution 3

.a3 {
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
}
.b3 {
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
}



Solution 4

.a4 {
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
}
.b4 {
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
}



Solution 5 

.a5 {
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 5px 5px 15px 5px rgba(0,...



If you need more customization for your shadows, explore these online box shadow generators:

Go to: ,

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

Warning in Next.js: When utilizing conditional rendering, the server HTML is expected to have a corresponding <div> inside another <div>

Although similar questions have been asked on various platforms like Google, none seem to provide answers that align with my specific situation. Essentially, my goal is to have a different search bar displayed in the header based on the page I am currentl ...

javascripthtmlreactjsnext.js

The `div` element automatically starts on a new line rather than expanding vertically

Check out my code here: http://jsfiddle.net/sfhs6ra1/ I'm facing an issue where I want the title of post #2 to be aligned next to the thumbnail image, taking up more vertical space instead of moving to a new line. Any suggestions on how I can achiev ...

htmlcss

Is there a way for me to collaborate on a footer control with a different website?

Is it possible to seamlessly incorporate a footer from one website into another? Ideally, I want the footer HTML (and styles) to be dynamically inserted into different web pages. The common workaround is using an iframe, but this causes navigation issues ...

javascripthtmlcss.netmodel-view-controller

The issue of the Facebook like button not appearing may be due to the sequence in which FB.getLoginStatus() is being

After following the instructions on Facebook's site (http://developers.facebook.com/docs/reference/plugins/like/) to add a basic like button to my website using HTML5, XFBML, and iFrame methods without success, I suspected there may be an issue with m ...

facebookhtmlfacebook-likefacebook-javascript-sdk

Implementing Multiple Shared Footers in Rails 3

Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...

cssruby-on-rails-3footer

How can I trigger a function or automate code execution in Angular?

I have some code within a function that is crucial for initializing other variables. The issue I am facing is that this function does not execute unless it is called through another tag in the HTML. Is there a method to automatically initialize this func ...

htmlangular

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page. <div id="outer"> <div ...

htmlcssscroll

Issue with Django and Bootstrap navbar button and search field interaction

After extensive searching and attempts, I have yet to find a solution to my issue. I am currently working on an exercise using Django + Bootstrap to create a navbar. However, I can't seem to get the search button to align properly with the search fiel ...

htmlnavbarbootstrap-5

Dynamic content loading using AJAX to selectively update a designated section

I am having trouble displaying the error message in my form. Currently, it is causing my form page to load four times. Can someone help me identify what I did wrong? I only want to display that span: controllers: <?php /* * File Name: user.php */ ...

jqueryhtmlajax

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to. For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are ...

javascripthtmlcss

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

htmljquery

Having trouble sending data from the controller to the view in Laravel 8

I am struggling to display data retrieved from the database in my view through the controller. Despite trying various solutions found on similar questions, none of them seem to be effective. My main goal is to showcase a list of employees on my admin page. ...

javascriptphphtmllaravel

Why are my images only 1 pixel tall in Internet Explorer 8?

<img src="blah.png" width="150" height="auto"> When viewed in Firefox, Chrome, or Safari, the image will appear as intended. However, Internet Explorer may cause the image to display at a height of only 1 pixel while maintaining the width of 150 pix ...

htmlbrowser

What is the best way to animate the preprending of a div in an AJAX response?

Here is the code I am currently working with: $.ajax({ type: 'POST', url: 'load_more.php', data: {val:myval}, success: function (data) { $("#load_current").prepend(data); ...

javascriptjqueryhtmlcssajax

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

javascripthtmlcsscanvashtml5-canvas

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

I have a scenario on my website where I have two separate div elements: <div class="wg-block" data-reactid="10" <div class="wg-header" data-reactid="11"/div> .... <h4 class='condition'> "Text" </h4> <div cl ...

javascriptcssnightwatch.js

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

Top method for independently scrolling overlapping elements in both the x and y directions

Sorry if this is repeating information. I have a structure of nested divs like this: -container -row In order to enable scrolling without the default scrollbar appearing, each container and row has an additional container. My goal is to be able to scrol ...

javascripthtmlcssdom-eventsinline-styles

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

Here are the locations of my folders: index.ejs can be found inside Markdown Blog/views/articles This is where my css stylesheet is located: ../../css/styles.css Despite ctrl+clicking the path and successfully navigating to the css file, the styles do no ...

htmlcss