Slidey background

code • March 7, 2014

Each box below is an anchor tag with a linear-gradient. On hover, the background-position changes to reveal the second half of the link’s gradient.

See the Pen Slidey Background by Katy DeCorah (@katydecorah) on CodePen.

Creating the gradient

I created an even gradient for each link where the lighter color ends at 50% and the darker color starts at 50%. The gradient doesn’t repeat, but it’s twice it’s size on either the x or y axis. For example, the up (↑) link has background-size: 100% 200%. Unless I change the background-position, then the second half of the gradient will stay hidden because it’s clipped by the size of the element.

See the Pen Slidey Background: Demo 1 by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of the gradient

The demo above illustrates:

  1. The actual size of the gradient.
  2. The size of the element clips the gradient to reveal the first half of the gradient.
  3. Changing the background-position pulls the second half of the gradient into view.


On hover, I set the background-position to move 100% on the same axis that I doubled in size. For the up (↑) link, the rule is background-position: 0 100%;. The new position paired with a transition pulls the second half of the gradient into view.

Fat lip

Did you notice the lip of the darker gradient peaking in? The lip is adjustable on $start. Try changing the value. If the variable is 0, then the lip of the second half of the gradient disappears.


I love the sliding between the left (←) and right (→) links. It looks like they are both tugging at the same rectangle. I’ll have to hold onto this idea.

Keep reading code