how to use gradient with variables
linear-gradient(rgb(var(--main-color-1)),rgb(var(--main-color-2)) )
why this is not working
39 Replies
You'll have to give a bit more than just that one line. What's the HTML and CSS look like? Do you have a codepen to share?
background: -moz-linear-gradient(rgb(var(--main-color-1)),rgb(var(--main-color-2)) );
background: -webkit-linear-gradient(rgb(var(--main-color-1)) ,rgb(var(--main-color-2)) );
background: -ms-linear-gradient(rgb(var(--main-color-1)) ,rgb(var(--main-color-2)) );}
:root{
--main-color-1:, 178, 26, 255;
--main-color-2:115, 43, 222;
}
wait
normally you use something like this
just take this apart a put variables where you want
no dude i want to creat a settings box
wheere ucan change the color of the site
and the colors are all gradients
so i have to use gradients with variables
get it
Well, your
--main-color-1 has an extra comma right at the beginningyea
i fix it
you just change the values to variables
and it's still doesn't work
shoud i send the html file?
linear-gradient(45deg, var(--main-color-1), var(--main-color-2));and var sould be rgb instead of values?
Works just fine for me
using the
linear-gradient property instead of the prefix versionslet me try it
I also fixed the
--main-color-1 erroryou can turn any part of the value into a variable
bro
45deg
not mandatory?
Nope
I'd recommend reading the MDN docs on the topic to learn more about what is and isn't required:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
just one second
let me put in codepen
bcz it doesn't work
spelling error?
https://codepen.io/mohamed-lazreg/pen/wvxeVdg
it's on the left
Can you give a minimum working example? You have too much extra stuff in that pen. Makes it very difficult to know what exactly you're trying to do and where
okay
you can't use linear-gradient in color property 😉
Also you can't RGB and RGB colour property :p
Not to mention using pixels for font size…
what
okay u can see now
u can check now dude
You're still trying to use linear gradient for
color property, which doesn't work in CSSnow
no
im trying to use it in background-color
background-image not background-color
i can't use is iin background-color either?
nope
You can use
backgroundahaaa
i get it
But in your codepen nothing will be working b/c you're trying to modify
.introduction h4 but there is no .introduction to have an h4thank you guys
you are the best
Replace all your CSS with:
and it'll work
can i ask
one ,oe question
more
does anyone know a tutriol of how
to change background image of the lading page smoothly
li
like in fiver
You could try to inspect the code on their site. You can look in #resources and see if someone posted something similar. Otherwise I'd suggest using your favourite internet search engine and see what it can turn up
okk