CODEWITHSUNDEEP
csssassuser-experiencelinear-gradients
baptiste
baptiste

Reputation: 90

How to lighten / darken a linear gradient properly?

I'm trying to lighten / darken my button background when :hover on.

I tried different style like

  background-color:rgba(0,0,0,0.5);
  background-blend-mode:darken;

But it doesn't work like i want. I want a really really light lighten and same for the darken.

 background: linear-gradient(173deg, rgba(255,121,218,1) 0%, rgba(214,108,219,1) 39%, rgba(171,94,220,1) 85%, rgba(155,89,220,1) 100%);

here is my baby : My btn

Thanks for your help community <3

Upvotes: 1

Views: 4617

Answers (3)

tha
tha

Reputation: 56

I too encountered this problem and was looking for a solution. In the end, I decided to use different variables based on perpel's solution

/* gradient colors */
@color1: #8f23a2;
@color2: #c1276a;
@color3: #dc8f41;

@darken :10%;
@lighten :10%;

@my-gradient: linear-gradient(to bottom, @color1, @color2  50%, @color3);

@my-gradient-darken: linear-gradient(
                                to bottom,
                                 darken(@color1, @darken),
                                 darken(@color2, @darken) 50%,
                                 darken(@color3, @darken)
                                 );

@my-gradient-lighten: linear-gradient(
                                to bottom,
                                 lighten(@color1, @lighten),
                                 lighten(@color2, @lighten) 50%,
                                 lighten(@color3, @lighten)
                                 );

Upvotes: 0

perpel
perpel

Reputation: 11

You can use lighten inside linear-gradient like that:

background: linear-gradient(
  356deg,
  lighten(*your color*, 5%) 0%,
  lighten(*your color*, 5%) 33%,
  lighten(*your color*, 5%) 100%
);

Exemple here: https://codepen.io/perpel_/pen/LYyJWpp

Upvotes: 1

Soloh 999
Soloh 999

Reputation: 1

You can add a linear gradient white with opacity.

background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), *your color of the btn*;

Upvotes: 0

Related Questions