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>
Related
Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading.
I tried something like this but it doesn't work.
body {
height: 100vh;
background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.
CSS:
#container{
height: 100vh;
background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}
body {
background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Page:
<div id="container">
// put page code in here like it was body
</div>
I'm struggling to skew a div like the image below... whereby the bottom and top always cover 50% of the screen width if that makes sense.
I have attached an image for more info
EDIT: this is a photoshop image and I'm trying to recreate this with CSS.
I am not sure about the use case, but you can recreate this using 2 linear-gradient. Each one will have a triangle shape and will cover half the container.
body {
margin: 0;
}
.container {
height: 200px;
background:
linear-gradient(to top left, blue 50%,transparent 50.5%) left/50% 100% no-repeat,
linear-gradient(to bottom right, blue 50%,transparent 50.5%) right/50.5% 100% no-repeat;
}
<div class="container">
</div>
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>
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%);
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