Showing part of the box [duplicate] - html

Question

This question already has answers here:
How to color part of a box
(6 answers)
Closed 1 year ago.
I'm trying to show only part of the entire box.
<div class="box">30%</div>
.box{
background : linear-gradient(to right, rgba(250,0,0,0),rgba(250, 0, 0, 1));
}
The box looks like this, and I want to make only 30% of the background of the box colored and the rest transparent. I'm not trying to minimize the box to 30% width. I want the box's width to stay 100% but show only 30% of the gradient background.

Answer 1

If you wanna do it with the css background property, here you go:
background: background: linear-gradient(270deg, #F00 0%, rgba(255, 0, 0, 0.473958) 70.00%, rgba(255, 0, 0, 0) 70.01%, rgba(255, 0, 0, 0) 100%);
This is how it'll look line in a white background:
Notice the "70%" standing right there, it's where you can control where in the dimension you want a color to start (in this case rgba(255, 0, 0, 0) at 70% from the right border)
You can read more about it at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()#gradient_with_multi-position_color_stops

Answer 2

If I understand you correctly, you are wanting to have the left 70% transparent and have the gradient show only for the last 30%. If this is what you want you need to add 70% to your first colour stop as follows:
#box1{
background : linear-gradient(to right, rgba(250,0,0,0) 70%,rgba(250, 0, 0, 1));
}
#box2{
background : linear-gradient(to left, red, orange 70%, rgba(250,0,0,0) 30%);
}
#box3{
background : linear-gradient(to right, red 0%, orange 30%, white 30% );
}
.box {
margin-top: 15px;
}
<div class="box" id="box1">30%</div>
<div class="box" id="box2">30%</div>
<div class="box" id="box3">30%</div>
It looks like the OP was looking for something similar to a rainbow progress bar. There are many examples available including this one here: Progress bar different colors

Answer 3

Youn Can acheive it by:
css gradient background generator
with ::before and ::after
with clippath
span{
color:blue;
}
.box{
height:100px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,0,0,1) 30%);
}
.box2{
margin-top:30px;
position:relative;
height:100px;
}
.box2::before{
content:"";
position:absolute;
background-color:#000;
left:0;
top:0;
height:100%;
width:30%;
z-index:-1;
}
.box3{
background-color:#000;
height:100px;
margin-top:15px;
clip-path: inset(0 70% 0 0);
}
.box4{
margin-top:15px;
position:relative;
height:100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}
.box4::before{
content:"";
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
background-color:#fff;
}
<div class="box">
<span>content<span>
</div>
<div class="box2">
<span>content<span>
</div>
<div class="box3">
<span>width clip path</span>
</div>
<div class="box4">
<span>As per your comment</span>
</div>