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. https://i.sstatic.net/NdAUB.png

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

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

javahtmlrtf

Bootstrap link causing alterations to my CSS code

After incorporating Bootstrap into my HTML, I noticed that it caused some unexpected changes to my CSS code. Original CSS: https://i.stack.imgur.com/EsE6J.jpg Modified CSS after applying Bootstrap: https://i.stack.imgur.com/yH1r9.jpg Link to Bootstrap ...

csstwitter-bootstrap

Customizing nested tables in your HTML email

When creating an HTML email template with nested tables for maximum email client support, the question arises about using inline styling. Should the style always be applied to the lowest level td, or is it possible to apply it to a parent table or td? For ...

htmlcssemail

Steps for accessing CSS variables within a scoped style block in Vue with Buefy_integration

After diving into the Buefy documentation, I successfully personalized my color scheme and even crafted unique hues by applying the is-[colorName] as a class to HTML elements. <style lang="scss"> // Importing Bulma's core @import "~bulm ...

cssvue.jsvuejs2vue-componentbuefy

CSS text wrapping will now occur on underscores as well as spaces and hyphens

I am facing an issue with long file names in my HTML formatting causing overflow. These file names use underscores instead of spaces, making it difficult to wrap them properly. For example: Here_is_an_example_of_a_really_long_filename_that_uses_underscore ...

cssword-wrapline-breaks

The media query designed for iPads with a minimum width will also be effective for Android devices

As I delve into the realm of editing CSS created by others, I come across a peculiar situation involving media queries specifically designed for iPads. While one query is intended for portrait orientation and another for landscape, they are causing havoc o ...

androidcssipadmedia-queriesdevice-width

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...

htmlcss

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

javascriptjqueryhtmlcss

Need help aligning content with flexbox? Having trouble with align-content and justify-content not working correctly?

First and foremost, I want to express my gratitude in advance for any assistance you can provide. My goal was to neatly align three pieces of content within each row, similar to the image displayed here: https://i.sstatic.net/vtsRj.png To achieve this lay ...

htmlcssreactjsflexbox

choosing a specific element with jQuery to be used for future purposes

I'm having some trouble with the following code snippet: var star = $("._container > favorite"); var symbol = $(star.parentNode.parentNode).attr("symbol"); var exchange = $(star.parentNode.parentNode).attr("exchange"); After running ...

javascriptjqueryhtml

python conducting automation tests with Selenium WebDriver on a mouse

Hello, I'm having trouble with opening the Mouser website and using the search bar to send some data. Below is a sample of the code I've been working on, but I can't seem to find the correct CSS selector. Any help would be greatly appreciate ...

pythoncssseleniumselenium-webdriverwebdriver

React can easily incorporate CSS from multiple components

I'm experiencing a CSS import issue in my React project. I have a "Home" page that imports Home.css and a "Hero" page that imports Hero.css. Strangely, the styles from Hero.css are being applied to every page in the application without me explicitly d ...

htmlcssreactjs

Update the identifiers and titles for duplicated elements

On my form, users can input multiple delegate details. Here's a snippet of the HTML code: <div id="Delegate1" class="clonedInput"> <h4 id="reference" name="reference" class="heading-reference">Delegate #1</h4> ...

jqueryhtmldom

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

javascriptjquerycssbootstrap-table

How to align the last item in the bottom row using Flexbox styling

Is it possible to center the last element when resizing the window to a smaller resolution, even though the parent's justify-content parameter is set to space-between? I understand that using center or space-around would achieve the desired result, bu ...

cssflexbox

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

Discovering the true width of an element using JavaScript

Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...

javascriptjqueryhtml

Effortless design using Flex Box

Creating a consistent HTML structure for my website using bootstrap 4 is my goal. The key elements include: sidebar, h1, and content. The challenge lies in organizing them effectively based on the screen size: For mobile view, they should be arranged in ...

csslayoutflexboxbootstrap-4

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css