Kevin Powell - Community•13mo ago

:root gradient color issue

Hello everyone, I'm creating test project to test my skills from the scratch, and I try the root gradient color but when applying this color can show in my website, can you help me guys whats wrong in my gradient code https://codepen.io/Cortezano/pen/VwgKWJp btw, I'm testing it in the nav-bar-section with the gradient color just to see if I can do it, but it doesn't really work, I will put the image that want to achieve color to my font, thank you!

Cortezano

CodePen

VwgKWJp

...

2 Replies

Toni.•13mo ago

there's a few issues: 1. everything in the gradient is put at 100%

    --cyberpunk: linear-gradient(90deg, #00F0FF 100%, #5200FF 100%, #FF2DF7 100%);

    --cyberpunk: linear-gradient(90deg, #00F0FF 100%, #5200FF 100%, #FF2DF7 100%);

i went ahead and modified it to be something like this:

--cyberpunk: linear-gradient(90deg, #00F0FF 25%, #5200FF 75%, #FF2DF7 100%);

--cyberpunk: linear-gradient(90deg, #00F0FF 25%, #5200FF 75%, #FF2DF7 100%);

2. you can't put gradient as text color just yet, so everyone just uses this workaround:

a {
  background: var(--cyberpunk);
  font-size: 30px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  background: var(--cyberpunk);
  font-size: 30px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

now take it from here and see what you can achieve

CortezanoOP•13mo ago

thank you sir working for me, I'm still studying the root how works and other css content, the MDN site is a bit confusing for me

Gaming

Programming

:root gradient color issue