Background Effects

    Background-blend-mode
    • Sintaxe: Background-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity
    • Pode ser utilizado após aplicar linear-gradient nas imagens, adicionando efeitos, como no caso do screen, que aplica uma opacity e garante a possibilidade de ver a foto do background.
    • Exemplos: W3 Schools Examples

    Linear-gradient, the "solid-color gradient"
    • linear-gradient(105deg, -> grau de rotação da gradient, como right (que iria da esquerda para direita, 90 graus seria igual da esquerda para direita)
      rgba($color-white, .9) 0%, -> $color-white, com opacity de .9 começando em 0%
      rgba($color-white, .9) 50%, -> Nesse ponto, colocamos novamente o 50% white.
      oranged 50%) -> Em 50%, queremos essa cor, então ao chegar em 50% estará completamente laranja.
    • Com isso, ao chegar em 50%, será branco e em 50% também irá começar o laranja, dado o efeito de corte.
    • Caso alterar o 50% white para 40%, a gradient do laranja começará mais gradient.
    • Esse é um funcionamento de uma linear-gradient.


    • Na primeiro imagem abaixo temos com o $color-white em 50%, que causa o branco a ir do 0% ao 50% e o laranja começar do 50%.
    • backdrop-filter: blur(10px). Pode utilizar outros no lugar de blur, como brightness, etc.
    • Utilizar o -webkit-propertyName antes do backdrop-filter porque o Chrome não possui suporte ainda.