I want to add radial gradient to a photo, starting from the top right part of the image. I have tried a lot of combinations, here is what I managed to do:
background: radial-gradient(circle at top right, #ffffff 0%, #000000 100%), url("../images/banner-image.png");
My problem is: it doesn't show my photo. Any ideas what could be wrong?
You're using solid colors rather than colors with transparency in order to see the image below.
Use rgba colors instead
body {
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), blue), url(http://www.fillmurray.com/284/196);
height: 100vh;
}
Related
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 know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains how to create something more advanced than this image as background in CSS. Any ideas on how to get started?
Not my fiddle, but I found this: http://jsfiddle.net/leaverou/RtGsM/
body {
background:
-moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%),
black;
background:
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%),
black;
background-position: 0 0, 80px 80px;
-webkit-background-size:160px 160px;
-moz-background-size:160px 160px;
background-size:160px 160px;
}
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
I have created a SCSS mixin based on the Bootstrap LESS mixin that will create a diagonally striped background. However, no matter how big I make the "tile" for the stripe, there always seems to be a 1px mis-alignment. I'm guessing that it has something to do with sub-pixel calculations, but I'm wondering if someone can point me in the right direction.
http://codepen.io/allicarn/pen/ncHod
Here's a screenshot of the codepen (Chrome) with one repetition of the background highlighted. Basically the 1px artifact originates from either edge not matching up to the next "tile"
Another goal would be to modify the angle and have it work, but that's just bonus points ;)
Not sure about support in older browsers, but an easier solution is
background-image: repeating-linear-gradient(45deg, gray 0px, gray 25px, transparent 25px, transparent 50px, gray 50px);
Anyway, I can see still artifacts at pixel level
At least this way you get the bonus about working at any angle ...
Also, looking at the codepen seems solved by increasing the size of the body:
body {
#include diagonalStripes(#aaa, 50px);
height: 1000px;
}
updated codepen
if this is the case, that would mean that the problem arises from the background extending beyond the element ?
Here's another type of LESS mixin for diagonal striped background:
.stripes(#angle: -45deg, #color: rgba(0, 0, 0, 1), #size: 4px /* size must be an even number */) {
background-image: -webkit-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -moz-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -ms-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -o-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
.background-size(#size #size);
}
Hope it helps...