Skip to main content
V
VShaneCurtis
Inspiring
May 28, 2022
Answered

Issues With Using Gradient Fill CSS Combined With Variables

  • May 28, 2022
  • 1 reply
  • 540 views

Hi Guys,

 

I'm having some issues with using variables as part of a gradient fill CSS statement.   I have basically created variables for each part of a gradient fill statement.   The objective being to be able to change any aspect of a gradient fill statement by chainging the specific variable to a valid value.  Everything seems to work until I try to plug in the orientation as a variable then the whole statement "breaks" and the colors get messed up.  What are the limits to using variables in this situation?  Thanks in advance for any help you can provide.

This topic has been closed for replies.
Correct answer osgood_

Your second gradient works as expected for the header.

 

I think your issue with the first gradient is youre trying to use a css variable to set 'linear-gradient'

 

1 reply

O
osgood_
Legend
May 28, 2022

You're not providing much in the way of code to help us unravel the problem.

 

You mention 'gradient fill' (I don't know what that is?). Do you mean linear-gradient applied to a background-image selector?

 

:root {
--orange: #ff8a00;
--red: #e52e71;
--direction: top right;
}

 

 

.gradient {
background-image: linear-gradient(to var(--direction), var(--orange) , var(--red));
height: 300px;
}

 

<div class="gradient"></div>

V
VShaneCurtisAuthor
Inspiring
May 28, 2022

Yes I should have posted example code.  That's  my fault.  When I try to substitute a variable in place of linear-gradient everything gets messed up.  I am able to use variables for all other parts of the statement.  My HTML is using IDs not classes but the idea is the same.  The first one uses the variable and does not appear to produce any problems.  If I try to do the same to the secomd ome the colors get messed up.

:root {
  --default-page-background-color: #dddddd;	
  --default-page-background-padding: 20px;	
  --default-border-color: #666666;
  --default-border-width: 1px;
  --default-border-radius: 5px;
  --default-border-style: solid;
  --default-background-color: #ffffff;
  --default-gradient-orientation: linear-gradient;
  --default-gradient-position: to top;
  --default-gradient-start-color: #3E6EB6;
  --default-gradient-start-position: 0%;
  --default-gradient-end-color: #E0E8F5;	
  --default-gradient-end-position: 100%;
  --default-font-family: Helvetica, Verdana, Arial , sans-serif;
  --default-font-size: 2em;
  --default-font-color: #666666;

#headernavigation {
  border: var(--default-border-color);
  background: var(--default-background-color);
  background: var(--default-gradient-orientation)(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));		
  }

#header {
  background: var(--default-background-color);
  background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
}

 

O
osgood_Correct answer
Legend
May 28, 2022

Your second gradient works as expected for the header.

 

I think your issue with the first gradient is youre trying to use a css variable to set 'linear-gradient'

 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices