Как обрезать div?

Question

Ребят, у меня есть div с закруглёнными углами, а в этом div должен быть ещё один, выполняющий роль светового эффекта. И этот световой эффект мне как-то надо обрезать. Причём эффект находится внутри основы.

.upcol {
  width: 96%;
  height: 70px;
  background-color: #1e1d2b;
  position: fixed;
  top: 0;
  left: 2%;
  border-radius: 20px;
}

.upcoleff1 {
  position: fixed;
  width: 20%;
  height: 50px;
  top: 0;
  left: 0;
  background-color: #f0c0aa;
  filter: blur(50px);
  opacity: 1;
}

<div class="upcol">
  <div class="upcoleff1"></div>
</div>

Answer 1

.upcol {
  width: 96%;
  height: 70px;
  background-color: #1e1d2b;
  position: fixed;
  top: 0;
  left: 2%;
  border-radius: 20px;
  
  overflow: hidden;
}

.upcoleff1 {
  position: fixed;
  width: 20%;
  height: 50px;
  top: 0;
  left: 0;
  background-color: #f0c0aa;
  filter: blur(50px);
  opacity: 1;
  
  position: absolute;
}

<div class="upcol">
  <div class="upcoleff1"></div>
</div>

Answer 2

Возможно, Вы хотели добиться примерно такого эффекта. Т.е. визуально уравнять основной div и световой эффект.

.upcol {
width: 96%;
height: 70px;
background-color: #1e1d2b;
position: fixed;
top: 0;
left: 2%;
border-radius: 20px;
}

.upcoleff1 {
position: fixed;
width: 20%;
height: 50px;
top: 0;
left: 2%;
background-color: #f0c0aa;
filter: blur(20px);
opacity: 0.5;
}
<div class="upcol">
<div class="upcoleff1"></div>
</div>

БЛОГ НА HUSL

Как обрезать div?

Ответы (2 шт):