Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect.

Below is the CSS code used:

.text1{
    background-color: red;
    -webkit-box-shadow:0px 0px 150px 20px rgba(255,0,0,0.5);
    -moz-box-shadow: 0px 0px 150px 20px rgba(255,0,0,0.5);
    box-shadow: 0px 0px 150px 20px rgba(255,0,0,0.5);
}

.text2{
    background-color: blue;
    -webkit-box-shadow:0px 0px 150px 20px rgb(0, 130, 255, 0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(0,130,255,0.7);
    box-shadow: 0px 0px 150px 20px rgba(0, 130, 255, 0.7);
}

.text3{
    background-color: green;
    -webkit-box-shadow:0px 0px 150px 20px rgba(0,255,0,0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(0,255,0,0.7);
    box-shadow: 0px 0px 150px 20px rgba(0,255,0,0.7);
}

.text4{
    background-color: yellow;
    -webkit-box-shadow:0px 0px 150px 20px rgba(255,255,0,0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(255,255,0,0.7);
    box-shadow: 0px 0px 150px 20px rgba(255,255,0,0.7);
}

And here is the corresponding HTML code structure:

<div class="categories">
    <div class="row">
        <div class="game text1"><a href="#">text</a></div>
        <div class="game text2">text</div>
    </div>
    <div class="row">
        <div class="game text3">text</div>
        <div class="game text4">text</div>
    </div>
</div>
htmlcss

Answer №1

The layering of the rectangles is determined by their z-index values, with one appearing on top of the other due to having a higher value (not z-index itself but rather the order in which they are stacked).

To ensure that all rectangles have box shadows underneath them, you can use pseudo-elements and assign the box shadows to them, setting their z-index to -1:

.text1 {
  position: relative;
  background-color: red;
}

.text2 {
  position: relative;
  background-color: blue;
}

.text3 {
  position: relative;
  background-color: green;
}

.text4 {
  position: relative;
  background-color: yellow;
}

.text1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 150px 20px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 150px 20px rgba(255, 0, 0, 0.5);
  box-shadow: 0px 0px 150px 20px rgba(255, 0, 0, 0.5);
}

.text2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 150px 20px rgb(0, 130, 255, 0.7);
  -moz-box-shadow: 0px 0px 150px 20px rgba(0, 130, 255, 0.7);
  box-shadow: 0px 0px 150px 20px rgba(0, 130, 255, 0.7);
}

.text3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 150px 20px rgba(0, 255, 0, 0.7);
  -moz-box-shadow: 0px 0px 150px 20px rgba(0, 255, 0, 0.7);
  box-shadow: 0px 0px 150px 20px rgba(0, 255, 0, 0.7);
}

.text4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 150px 20px rgba(255, 255, 0, 0.7);
  -moz-box-shadow: 0px 0px 150px 20px rgba(255, 255, 0, 0.7);
  box-shadow: 0px 0px 150px 20px rgba(255, 255, 0, 0.7);
}

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

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

Provide a spider with unadulterated HTML rather than setting off AJAX requests

While my website is being crawled, which PHP function should I utilize to ensure that even if ajax isn't activated, my content still gets transmitted? PHP doesn't have the ability to determine if ajax is supported. Objective: Provide the crawle ...

htmlajaxweb-crawler

Tips for aligning 2 divs in the same position?

I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px. Here is the HTML code snippet: <video class="player__video" width="506" height="506" muted preloa ...

htmlcss

Utilize Firebase Hosting to Host Your Vue Application

Having some trouble with hosting code on Firebase. Instead of displaying the value, {{Item.name}} is appearing :( Same code works fine on Codepen. Wondering if Firebase accepts vue.min.js? When deployed, the site is showing {{var}} instead of the table va ...

javascripthtmlfirebasevue.jsgoogle-sheets

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...

csstypescriptmaterial-uicss-grid

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Tips for customizing the appearance of the span tag within the option text of an HTML select

Unique Link In my current situation, I am facing an issue where the asterisk in the first option of my HTML select element should be displayed in red color. Despite my efforts to style it, the asterisk always appears in the default black color. I have pr ...

htmlhtml-select

Retrieving Checkbox Values in PHP: A Step-by-Step Guide

Question: Retrieving values from a checkbox I am facing an issue with the script below where I am only able to retrieve the last selected value of the checkbox. How can I modify the code to fetch all the selected values for validation purposes? Here ...

phphtmlformscheckbox

Challenges with HTML and Session Handling

It's not functioning properly! <?php session_start(); ?> <p class="username"><?php echo $_SESSION['name']; ?></p> ...

phphtml

Is there a way to access comprehensive data pertaining to an ID through Ajax?

I need help with an Ajax call. Below is the code I currently have: $.ajax({ async: true, url: 'test/', type: 'POST', datatype: 'text json', data: { id: id, }, success: function(data) { // Retrieve the da ...

javascriptjqueryhtmlajax

The -webkit-background-clip feature seems to be malfunctioning in Safari

I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...

htmlcss

What is the best way to merge 60 related jquery functions into a unified function?

I designed a webpage that serves as an extensive checklist. When you click on the edit button for a checklist item, a modal window opens up. This modal window contains a radio button to indicate whether any issues were found during the check. If "Yes" is s ...

javascriptjqueryhtmlajax

"Implementing CSS inline styles for improved appearance on a Safari browser when visiting

Having some trouble using CSS to create rounded corners on my Facebook fan page. Everything works fine except for Safari browser. I've tried inline styles and a separate stylesheet, but no luck. Any help would be appreciated. My CSS for rounded corne ...

htmlcssfacebook-page

Is there a clash with another code causing issues in troubleshooting a straightforward jQuery function?

jQuery(document).ready(function() { jQuery("#bfCaptchaEntry").on("click", function(){ jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); }); jQuery("#bfCaptchaEntry").on("blur", function(){ jQuery("#b ...

javascriptjqueryhtml

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

javascriptjqueryangularjshtml

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...

javascripthtmlcss

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

javascripthtmlvue.jsbutton

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

Leveraging Polymer web components without the need for a package manager

I am looking to incorporate web components into a static web page without the need for any package manager or JavaScript build process. After referencing , I attempted to import them using unpkg by changing <script type="module" src="node_modules/@pol ...

javascripthtmlpolymerweb-component

jQuery Super-sized Not Expanding Vertically

I am facing an issue with resizing a 1920x1200 background image using jQuery Supersized. Whenever I resize the browser, there is a gap that appears vertically instead of filling up to compensate for the width constraint. I have checked and copied the sett ...

jquerycsssupersized