The Basics of Linear Gradients

Search Best Practices - Search Front-End
1

You can use linear gradients to format various aspects of your answers experience –CTAs, Answers Background, Results Title Bar, and Results Card to name a few—within the answers.scss file by editing the background-image. There are several types of gradients that can be used based on direction. Here are some examples of both gradient types and objects you can apply them to:

Controlling Gradient Transitions

Linear-gradients transition evenly from one color to the next by default. However, you can use percentages after each color within a linear-gradient to identify start and stop values. The starting colors default start value when left blank is 0%. Similarly, the final colors stop value defaults to 100%.

Adjusting the Transition:
You can toggle with how much space a color takes up within a particular object. If you want want one color to take up a majority you can do something like this:

  • The Code:
.HitchhikerAllFieldsStandard-title {
background-image: linear-gradient(to right, red 33%, pink 70%, purple);
}
  • The Result:

712×56 3.72 KB

Creating Hard Lines:
To do this you must apply percentage values based on where two colors reach a midpoint

  • The Code:
.HitchhikerAllFieldsStandard-title {
 background-image: linear-gradient(to right, red 33%, pink 33% 66%, purple 66%);
}
  • The Result:

723×61 1.27 KB

*You can use similar logic to adjust where you want the midpoint of a transition between colors to be (e.g., you want the object to be 70% of one color and 30% of a second color, but with an even transition)

Top to Bottom

  • The Code:
.yxt-Results-titleBar {
background-image: linear-gradient(red, orange, yellow);
}
  • The Result:

728×148 5.35 KB

Left to Right

  • The Code:
.HitchhikerCTA {
background-image: linear-gradient(to right, red , orange, pink);
color: white;
}
  • The Result:

Diagonal

  • The Code
.HitchhikerJobStandard {
background-image: linear-gradient(to bottom right, red, yellow);
color: white;
}
  • The Result

755×320 64.2 KB

*For FAQ Accordion cards you will need to reference the toggle object that contains the question AND the expanded content section

Using Angles to Define Direction

This is similar to the previous examples, but will give you more control of the direction. For example, value of 0deg is equivalent to “to top” while 90deg is equivalent “to right”.

  • The Code
body {
 background-image:linear-gradient(240deg, red, yellow, green);
}
  • The Result:

1596×614 72.5 KB

*Read this post for more info on how to edit the full answers background.

Repeating Gradients

  • The Code:
.HitchhikerAllFieldsStandard-title {
background-image: repeating-linear-gradient(red, pink 10%, purple 20%);
}
  • The Result:

712×174 5.19 KB

*You can also define the direction using terms like “to left” or degree values with the same syntax structure as previous examples.

Note: For most of these examples, there are 2-3 colors used but you can use as many as you want.

1 Like