How to avoid CSS inheritance to keep linear gradient background color intact?

Question

How to avoid CSS inheritance to keep linear gradient background-color intact? Basically I want to avoid giving background color red from "box" (class name) div to .box-child div. I want .box-child to keep the initial background color set on .main-box div.

Normally I would just set background color back to what it was, but it is a linear gradient background and if I set it back on a small area it doesn't look what it is supposed to look like. I want to keep it intact.

.main-box {
  color: white;
  height: 500px;
  background: linear-gradient( 180deg, rgba(2, 0, 36, 1) 0%, rgba(84, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

.box {
  height: 300px;
  background: red;
}

.box-child {
  height: 150px;
  inherits: none;
}

<div class="main-box">
  MAIN BOX
  <div class="box">
    BOX
    <div class="box-child">
      BOX CHILD
    </div>
  </div>
</div>

I don’t understand what is your goal and what is wrong. Can you describe what you achieve? — Mr. Brickowski, Mar 11 '21 at 18:46
I need .box-child to have the same background as .main-box. If I set .box-child background manually back to what it was it will start the gradient background all over again - I need it to keep .box-child inheriting background from .main-box NOT .box. — Mystery Man, Mar 11 '21 at 18:51
I need to use border-radius outwards and for that I need to use 2 divs - I thought this was much simpler example to show. If I didn't use linear gradient background then I would set background color back manually on .box-child and it would be solved. — Mystery Man, Mar 11 '21 at 18:54
you are probably overcomplicating a simple task, check this: https://stackoverflow.com/q/51496204/8620333 — Temani Afif, Mar 11 '21 at 19:58
I need something similar to this https://stackoverflow.com/questions/65071009/outward-border-radius-like-given-in-below-picture It isn't as simple as that to implement. — Mystery Man, Mar 11 '21 at 20:02
I appreciate the effort, but I need the border radius outwards, not inner. — Mystery Man, Mar 11 '21 at 20:16
I’m not sure I totally understand. Are you basically wanting to cut a hole in box so that main shows through? Or is it just main’s background that should show? — A Haworth, Mar 12 '21 at 05:14
Main background should show for .box-child. Basically what I am doing is having .box with different background so that I an create border radius outwards effect. — Mystery Man, Mar 12 '21 at 06:08

score 0 · Accepted Answer · answered Mar 12 '21 at 09:03

As I understand it, the aim is to give the box-child element the same background as main - that is to give it that bit of main's background that it is sitting over.

This can be done if we give box-child a pseudo element that sits behind it but has the same dimensions, positioning and background as main and then add a clip-path to box-child to cut out those bits of the pseudo element that aren't within it.

/* give the box-child before pseudo element the same dimensions and same background as main */
.main-box, .box-child::before {
  height: 500px;
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(84, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
}

.main-box {
  color: white;
  position: relative;
}

.box {
  height: 300px;
  background: red;
}

.box-child {
  height: 150px;
  clip-path: inset(0);
}

.box-child::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

  <div class="main-box">
    MAIN BOX
    <div class="box">
      BOX
      <div class="box-child">
        BOX CHILD
      </div>
    </div>
  </div>

How to avoid CSS inheritance to keep linear gradient background color intact?

1 Answers1