I can't make a gradient work, this is the code of my website:
.overlay {
background: #ff0000;
background-size: auto auto;
background-size: cover;
height: 480px;
position: absolute;
width: 100%;
z-index: 2;
}
Gradient code:
background: linear-gradient(4deg, #ff0000, #0076ff);background-size: 400% 400%;-webkit-animation: AnimationName 16s ease infinite;-moz-animation: AnimationName 16s ease infinite;animation: AnimationName 16s ease infinite;@-webkit-keyframes AnimationName {0%{background-position:52% 0%}50%{backgroundposition:49% 100%}
100%{background-position:52% 0%}}@-moz-keyframes AnimationName {
0%{background-position:52% 0%}
50%{background-position:49% 100%}
100%{background-position:52% 0%}}@keyframes AnimationName {0%{backgroundposition:52% 0%}50%{background-position:49% 100%}100{background-position:52% 0%}}
where do i paste the code?
This is your code: I have added some newlines and some braces (
{}
) and now it works. I hope it's what you need.I don't know where you copied the code from, but it's very messy, with bad syntax. They already answered you correctly, but I am going to try to do it while I explain how to understand where your problem is, how to solve it by simplifying the code and at the end I leave you the demo with your problem solved.
The first thing I recommend is to pay attention to how we are going to unravel this code:
Sorting by line breaks
I hope that at least you are clear about the basics of css and that is that for each
(;)
you see it is a new sentence, that is, a line break for each semicolon will help to read it better when we develop:Regarding the lines that contain the word "keyframes" with the prefix
@
means that they aresintaxis de animación
in css, these are separated the same as the selectors, that is, for each bracket{}
there is a new selector. The CSS animation syntax is like this:In the code you point to, it's all together, so it looks like this:
So, we would only have to identify when there is a double bracket
}}
to separate one animation from another, as well as within each animation there is a time selector, it is better to separate them by line breaks to better identify them, leaving the code like this:Simplifying the code (deleting prefixes)
With this you can already identify that there are properties with "prefixes" type
@-webkit-
and@-moz-
, that is, they are repeated codes and that today, they are not really necessary in modern browsers (except in one or another property not yet implemented) and they only complicate the code syntax. The best thing is that you write your code without these and useprefix-free
orauto-prefix
so that in the end these are written only when they are necessary, but automatically and not manually by you.In short, as you can check in the following links: you can stop using prefixes in animations or
@keyframes
and in the property: animation . So with that said, your code would be much shorter:Now you can distinguish that the first 3 properties can go inside the same selector
.overlay
at the end or wherever you want, I'm going to order it like this:latest fixes
And in this way we identify that you incorrectly use the same property 3 times, I mean:
background-size
and since css is a cascading language, by inheritance only the last line matters, the others are overwritten, so we can delete them without fear.Also that you use background, without specifying what type of background you are using, this just causes the properties to be overridden, so you should change:
background: #ff0000;
by and by .background-color:
#ff0000;
background: linear-gradient(4deg, #ff0000, #0076ff);
background-image:
linear-gradient(4deg, #ff0000, #0076ff);
Gradient Backgrounds Syntax
I take this opportunity to explain that the funds with gradients, you have the following syntax:
The type of gradient can be linear, or radial and in terms of angle in this case it is 4° degrees but it can also be by direction, something like:
to right, to bottom, to top, to left
or diagonal combinations like:to bottom right
,to top left
, etc. Learn more about this syntax here . The position of the color can be unspecified as in your case and it will be sorted automatically according to the order, but you can specify byFinally, in the time selector
0%
you have misspelledbackground-position.
We corrected it and we finally have:Ready, now with this we have two selectors, the selector
overlay
and the animation selector@keyframes
.I don't know if you are clear about how CSS animations work, but with the above you can get an idea of what happens for each time selector. So I leave you a demo, with your code working.
Demo with fixes