so im trying to make a gradient like this one but with other colors:
So, im kinda new to css and i don't know how to make this glow effect bellow the gradient, thanks!
A background image can consist of more than one image - the first image in the list overriding those that come afterwards.
Using gradient images this snippet puts a transparent to a sort of dark gray from top to bottom image over a left to right gradient of colors.
Obviously this is just a start which will require you to play around with the parameters and the colors to get the effect you want.
div {
height: 10vh;
background-image: linear-gradient(transparent 0, #404040 40%), linear-gradient(to right, cyan, magenta, yellow);
background-size: 100% 100%;
background-repeat: no-repeat no-repeat;
}
<div></div>
I need to change the color of the center line in the v-timeline components of the Vuetify framework so that it will be a particular color up-to a certain colored dot and another color afterwards as shown here, is it possible to do so?
The color for the whole line could be changed as follows
.theme--light.v-timeline:before {
background: red;
}
I think only one way is setting linear-gradient. Because v-timeline divider setting up all the space. Try setting
background: linear-gradient(180deg, black 0% 50%, gray 50% 100%) !important
Is it possible to make a part of image gradient on an existing background?
The result as in the example picture you added can be achieved by using 2 containers, one with a background image, the other (which lies on top of the first) uses a CSS gradient background, where one of the gradient colors has an alpha of 0 (i.e. is transparent).
For more info on CSS gradients see: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients
to make a gradient that is transparent on one side, use rgba color, for example:
#grad1 {
height: 200px; width:500px;
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}
The a in rgba stands for alpha, it is the transparency an has a value between 1(opaque) and 0(transparent)
I have this set up as an element's background:
div{
width: 400px;
height: 200px;
background: linear-gradient(to right, #6f5a40 40%, #149f79 60%);
}
But the gradient seems to strongly favor the green color despite both colors being given equal space on the gradient function. Is this simply a trick of our eyes, being able to distinguish green better than other colors, or is there something I can do programmatically to fix this? Switching the order of the gradients doesn't seem to do anything: green appears to be favored over the brown.
Fiddle: http://jsfiddle.net/xw6fqymu/
EDIT: I should also point out that this gradient is being overlaid on an image, where the effect is even more noticeable. I don't imagine the image has much to do with this at all since reordering the colors with the image has about as much effect as without the image.
This seems to be a perceptual issue.
Here are two sample pictures I've created in a graphic editor.
Both gradients are purely linear (0% to 100%).
As you probably notice, eye starts to perceives colors close to the desaturated edge very early.
What you may do is a non-symmetric distribution, e.g. linear-gradient(to right, #6f5a40 48%, #149f79 70%); — see fiddle.
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread