example background
I've been trying to replicate the background pattern on the photo above. It seems to me like there is a linear gradient with 2 radial gradients nested within it. But I'm not sure... Can someone please confirm? Can someone explained how to position the 2 radial gradients within the actual background? Thanks for helping.
I've searched google multiple times but my queries can't seem to find what I am looking for. I've tried nesting a radial-gradient within my linear-gradient but it doesn't work.
background: linear-gradient(45deg, radial-gradient(#b1f2ff, #63e5ff, #3cdfff), radial-gradient(#dd2288, #ff0057, #cc08c7));
I hope this simple example helps you to make your one:
div{
width:100%;
height:400px;
background-image:radial-gradient(circle at 20% 70%,yellow 0%, transparent 30%),linear-gradient(45deg, #6634ff, #00e5ff);
}
<div></div>
In order to learn more, read these articles:
https://www.w3schools.com/css/css3_gradients.asp
https://www.w3schools.com/cssref/func_radial-gradient.php
This is the best I could get using only radial-gradients:
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
background: radial-gradient(circle at 25% 60%, #3BBFFE 0, transparent 25%), radial-gradient(circle at 70% top, #D21372 0, #7120FD 60%);
}
Related
I've seen various examples of how to fade out a line of text in CSS. However, these all involve a gradient overlay which matches the background colour. Usually this might be white for example, where the background is also white.
However, if you have a gradient based background with some colour for example, the fade doesn't work in this approach. I can not find any other methods to achieve this desired look.
Is there not a way to fade out text to become transparent itself in a gradient method applied to it directly?
Is something like this what you're looking for?
div {
background: linear-gradient(to bottom right, red, yellow);
}
h2 {
background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block;
font-size: 50px;
}
<div>
<h2>
test test test test test
</h2>
</div>
There is a sleek solution which uses mask-image. Yes, it uses a linear-gradient(), however, because it works with pure transparencies, no knowledge of the background color is necessary:
div {
white-space: nowrap;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}
Works for me in Chrome and caniuse for mask-image looks not bad.
I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.
So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.
The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.
The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.
Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
Two Methods:
With Gradients:
div{
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)
}
Fiddle -> http://jsfiddle.net/QjqYt/
Without Gradients
div{
position:relative;
z-index:1;
width:200px;
height:200px;
margin:50px auto;
border:4px solid rgb(50,50,50);
}
div:before{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:70%;
content:"";
background-color:red;
}
Fiddle -> http://jsfiddle.net/6cKZL/1/
As an update to the accepted answer:
.only-start{
background: linear-gradient(
to right,
red,
red 1rem,
transparent 1rem,
transparent 100%
);
}
Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.
Note: If someone deems this 'comment-ish' - I can move it.
You can use gradient with color percentage.
#gradbox {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}
<div id="gradbox"></div>
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
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.
What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.
But when I use background-image, the color disappears.
It's perfectly possible to use both a color and an image as background for an element.
You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.
To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
Excellent documentation by Mozilla, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
use
background:red url(../images/samle.jpg) no-repeat left top;
And to add to this answer, make sure the image itself has a transparent background.
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
In order to achieve that, you need to set the background property like this:
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
Here's an example of using background-image and background-color together:
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}
<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>
Make half of the image transparent so the background colour is seen through it.
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body's background-image along with the html background-color based purely on simple logic.
Gecko Bug
Avoid the following...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
body {background-color: #fff; background-image: url(example.png);}
Hello everyone I tried another way to combine background-image and background-color together:
HTML
<article><canvas id="color"></canvas></article>
CSS
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}
JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}
Please let me know if it worked for you
Thanks
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;