How can I make the gradient border between to colors look like a line? Is there also a way to start the line in left bottom corner and not in the middle of right side of the button? I'm using this css for this:
background: linear-gradient(to right bottom, #00C9FF 30%, black 50%)
You can use the following code to get the expected result:
div {
background: linear-gradient(to right bottom, #00C9FF calc(50% - 1px), black calc(50% + 1px));
border:7px solid #00C9FF;
color:#fff;
height:100px;
line-height:100px;
text-align:center;
width:100px;
}
<div>Test</div>
The calc() is needed to make the line smooth. Otherwise the border looks very strange on some browser.
You should move both colors to the same position:
background: linear-gradient(to right bottom, #00C9FF 30%, black 30%);
Related
body>div {
background-color: red;
}
<div>Need more here</div>
Can someone help with creating the same background as on the bootstrap main page?
I tried with the gradient, but it doesn't work.
I can't get the 4 colors that come together in white in the middle.
.bs {
aspect-ratio: 1/1;
background-image: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1) 85%), radial-gradient(ellipse at top left, rgba(13,110,253,0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132,0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846,0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132,0.5), transparent 50%);
}
<div class="bs"></div>
I'm trying to make a gradient that, for branding purposes, must be (1) at a specific angle, and (2) the top of it must be inset by a specific amount:
The rest of the proportions don't matter. I created this gradient like this:
background: linear-gradient(75deg, white 0%, black 30%, blue 30%, white 100%);
This only produces the correct top inset at specific client area height/widths. At other sizes, offset can be different:
Again, for branding reasons, this is unacceptable. That top of that slope must be inset by a specific amount.
I tried use a pixel value for the inset, e.g.
background: linear-gradient(75deg, white 0%, black 125px, blue 30%, white 100%);
This works... for the bottom of the slope. The bottom will be offset by 125px at any shape/size:
I'd like to do the same thing but have the top offset fixed to 125px.
You can approximate it using pseudo element and rotation. You consider a straight gradient (90deg) then you rotate it by adjusting the transform-origin to have the distance you want on the top:
.box {
height:300px;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
/* a random big value for top bottom and left*/
top:-500px;
bottom:-500px;
right:0;
left:-500px;
/**/
/* in the below 625px = 125px + 500px and adjust the 350px to get close to the gradient you wnat*/
background: linear-gradient(90deg, white 350px , black 625px, blue 0, white);
transform:rotate(-15deg);
transform-origin:625px 500px;
}
<div class="box">
</div>
I am trying to add a gradient as a bottom border to my site's header using border-image CSS. The gradient needs to fill up 100% of the width across.
I can get the gradient to fill up the majority of the bottom border using border-image-width and border-image-slice, but for some reason it excludes the two bottom corners as white space. How can I get the gradient to span ALL of the bottom in one flow?
I have tried removing border-image-slice altogether and that fills in the two bottom corners but omits the rest of the bottom border.
{
border-image-width: 0 0 10px 0 auto;
-moz-border-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 0 0 1 0;
}
It seems that setting both border-image-width and border-image-slice to "0 0 X 0" should only show the bottom. Good so far. However, this also removes the two bottom corners so there are a couple pixels of white space preventing the gradient to flow from one edge of the site to the other. Strangely, when I remove the bottom-image-slice altogether, only the two bottom corners show up with the gradient. I need the gradient to start with the bottom left corner and go all the way across the bottom through the bottom right corner.
Consider a background that will cover a transparent border and it will be easier to handle:
.box {
height: 50px;
border-bottom:10px solid transparent;
background:
linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) bottom/100% 10px border-box no-repeat,
red;
}
<div class="box"></div>
The issue with slices is that if you want for example the bottom/left corner you also need the bottom and left edge, not only the bottom edge.
Related to better understand the logic behind border-image-slice: border-image-slice for gradient border image
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
I want to make a simple bar with two different colors. What I want is for the 1st color to stop and the second color to start with no transition or gradient. I know it sounds dumb, gradient with no gradient!
CSS
-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);
And it produces very close results, but where the two colors meet it gets blurry because it is still doing the transition/gradient thing.
Is there a way to do perfect stops, if that's even the term?
This is my favorite gradient generator tool for CSS. There is a visual editor like photoshop and it spits out the CSS for you to copy and paste.
http://www.colorzilla.com/gradient-editor/
shortly it should be :
linear-gradient(
to top,
rgba(255,255,255,1) 60px,
rgba( 27,151,143,1) 60px
);
http://jsfiddle.net/b4j35/1/
and for chrome, it needs to overloap to avoid the blur defaut thingy thing :
http://jsfiddle.net/b4j35/2/
div.grad {
height: 100px;
background: linear-gradient(
to top,
rgba(255,255,255,1) 61px,
rgba( 27,151,143,1) 59px
);
border:solid;
}
What you have is already a no-transition gradient, since the end of the white and the beginning of the greenish are both at 60px. So, you can not do it better this way.
The way that is left is the multiple-background way:
div.grad {
height: 100px;
background: linear-gradient(to top, white, white), rgb(27,151,143);
background-size: 100% 60px;
background-position: left top;
background-repeat: no-repeat;
}
fiddle
By the way, I have changed the linear-gradient to the prefix-less version, it works like this in most modern browsers