CODEWITHSUNDEEP
cssborder-radius
Luis
Luis

Reputation: 2143

CSS box-shadow z-index or change order

I want to achieve the following effect using box-shadow:

enter image description here

but I am achieving the following: enter image description here

I am using the following code:

<div class="progress-container"></div>

.progress-container {
  width: 100%;
  height: 11px;
  position: relative;
  background: #EAEFF5;
  border-radius: 5px;
  z-index: -1;

  box-shadow: 
    80px 0 0  #0AA693 inset, 
    500px 0 0 #FF7800 inset;
}

You can find a my codepen here

thanks for any help.

Upvotes: 0

Views: 151

Answers (2)

Allen Al-Shamali
Allen Al-Shamali

Reputation: 111

Just increase the X-axis, you set it to 80px in the initial faze, 80px 0 0 #0AA693 inset, this is the shadow, the first number is the X-axis, the second the Y-axis and the third number the blur. So change it to something like 400px 0 0 #0aa693, this is the solution.

.progress-container {
  width: 100%;
  height: 30px;
  position: relative;
  background: #eaeff5;
  border-radius: 3px;
  z-index: -1;

  box-shadow: 400px 0 0 #0aa693 inset, 500px 0 0 #ff7800 inset;
}

Upvotes: 0

lifeiscontent
lifeiscontent

Reputation: 593

I don't think it's possible to do this with a box shadow because you cannot set a starting point for the x position.

.progress-container {
  width: 100%;
  height: 11px;
  position: relative;
  background: #EAEFF5;
  border-radius: 5px;
}

.progress-container::before,
.progress-container::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.progress-container::before {
  background-color: #FF7800;
  width: 500px;
}

.progress-container::after {
  background-color: #0AA693;
  width: 80px;
}
<div class="progress-container">
</div>

Upvotes: 1

Related Questions