Issues With Using Gradient Fill CSS Combined With Variables

[VShaneCurtis]

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.

[osgood_]

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>

[VShaneCurtis]

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));
}
}

[osgood_ · Accepted solution]

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'

[VShaneCurtis]

I am assuming that using a variable won't work.  I haven't found anything online clariifying when you can or can't use variables.   The idea was to make the gradient fully configurable using variables.  Guess that not gonna happen now.  Thanks for the clarificatio