Bardzo szybki CSS – tło jako gradient liniowy

Gradient liniowy to bardzo ciekawa i w sumie prosta funkcja, która odpowiednio użyta może ulepszyć wygląd naszej strony. Technicznie nie jest to w żaden sposób skomplikowane, choć jeżeli nigdy z gradientów nie korzystaliśmy, mogą się one na początku wydawać odrobinę dziwne.

Okej, tworzymy element <div> o klasie square, który w CSS stylujemy. Tradycyjnie, reset stylów, wycentrowanie body flexboxem plus nasz kwadrat:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.square {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(gold, tomato);
}

Tutaj jak widać nie używamy background-color, ale background-image razem z funkcją linear-gradient. Podajemy kolory, wszystko działa.

Możemy też podać kierunek „skąd-dokąd”, jest to banalnie proste, nie musimy (choć możemy) się bawić stopniami:

.square {
(...)
background-image: linear-gradient(to bottom right, gold, tomato);
}

Możemy też podać procentowo ile danego koloru chcemy:

.square {
(...)
background-image: linear-gradient(to bottom right, gold 40%, tomato);
}

W devtoolsach możemy potem dostosować to strzałkami w górę/dół i obserwować jak zmienia się gradient, aż otrzymamy taki, który nam się podoba.

Jakby tego było mało – podobnie jak w innych przypadkach (np. box-shadow) i tu są generatory online, które pozwalają nam wygenerować dany gradient a potem skopiować CSS.

Oczywiście – są jeszcze inne gradienty, np. radial, możemy sprawdzić, czy nam to odpowiada (osobiście za nimi nie przepadam).