Can you have background-image: linear-gradient( to center...); - html

Question

I have a div with background-image: linear-gradient( to bottom, red, blue);
but I want the to bottom to be to center but it does not work.
wright, now it looks like this
I want it to look like this
Does anyone know how to do this pleas help me?

Answer 1

What you are showing is a classic border:
.box {
border:40px solid blue;
height:50px;
width:50px;
background:red;
}
<div class="box"></div>
But I suspect you want a color fading so what you want is a radial-gradient
.box {
height:200px;
width:200px;
background:radial-gradient(farthest-side,red,blue);
}
<div class="box"></div>
Or maybe like below:
.box {
height: 200px;
width: 200px;
background: linear-gradient(to right, blue, red, blue);
position: relative;
}
.box::before {
content: "";
display: block;
height: 100%;
background: linear-gradient(blue, red, blue);
clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
}
<div class="box"></div>
Or like this:
.box {
height: 200px;
width: 200px;
background:
linear-gradient(to top right , red, blue) top right,
linear-gradient(to top left , red, blue) top left ,
linear-gradient(to bottom left , red, blue) bottom left,
linear-gradient(to bottom right, red, blue) bottom right;
background-size:50% 50%;
background-repeat:no-repeat;
}
<div class="box"></div>
Also using box-shadow
.box {
height: 200px;
width: 200px;
background: red;
box-shadow: 0 0 50px 35px blue inset;
}
<div class="box"></div>

Answer 2

What you can do is to utilize multiple background gradients:
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%), linear-gradient(to right, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>
Here's how it works:
Step 1: Make pure red background:
.item {
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
}
<div class="item"></div>
Step 2: Add horizontal stripe
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>
Step 3: Add vertical stripe
.item {
--outerColor: blue;
--innerColor: red;
width: 120px;
height: 120px;
background-color: var(--innerColor);
background-image: linear-gradient(to bottom, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%), linear-gradient(to right, var(--outerColor) 25%, transparent 25%, transparent 75%, var(--outerColor) 75%);
}
<div class="item"></div>

Answer 3

I think you want like this.
#grad1 {
height: 200px;
width: 200px;
background:
linear-gradient(90deg, blue, rgba(0,255,0,0) 30%),
linear-gradient(180deg, blue, rgba(0,0,255,0) 30%),
linear-gradient(0deg, blue, rgba(0,255,0,0) 30%),
linear-gradient(270deg, blue, rgba(0,0,255,0) 30%),
linear-gradient(0deg, blue, red, red 50%),
linear-gradient(90deg, blue, red, red 50%),
linear-gradient(180deg, blue, red, red 50%),
linear-gradient(270deg, blue, red, red 50%);
}
<div id="grad1"></div>