CODEWITHSUNDEEP
twitter-bootstrapsass
Parth Agarwal
Parth Agarwal

Reputation: 137

How can I use gradients in custom Bootstrap?

I want to make the primary color of my custom sass Bootstrap as a gradient but when I define my custom variable as a gradient, I get an error that says

"Error: $color: linear-gradient(to right, #c33764, #1d2671) is not a color for darken."

Now, I get that darken is used for links later in the variables file and many other places which just means that the link color is a percentage darker of the primary color. How can I achieve this?

Here is my _custom.scss which is included as the first partial in bootstrap.scss:

$celestial: linear-gradient(to right, #c33764, #1d2671);
$primary: $celestial;

Upvotes: 2

Views: 2867

Answers (1)

Kodie Grantham
Kodie Grantham

Reputation: 2031

linear-gradient is only valid for the background css property and the $primary bootstrap variable expects a color.

What you'll want to do is target the element that you would like to apply the gradient on directly like this:

.navbar {
  background: linear-gradient(to right, #c33764, #1d2671);
}

Upvotes: 1

Related Questions