Live
<html> <head> <title>Linear gradient</title> <style> div { display: inline-block; margin: 10px; width: 300px; height: 300px; border-radius: 40px; } div.one { /* Domyślnie kolory przechodzą w kierunku góra -> dół */ background-image: linear-gradient(red, blue); } div.two { /* Możemy zmienić kierunek przechodzenia kolorów za pomocą kierunków "top", "left", "right", "bottom" poprzedzonych słowem "to". */ background-image: linear-gradient( to right, red, blue, green, yellow ); } div.three { /* Możemy również kierować kolory pod kątem 45 stopni w dowolny narożnik elementu za pomocą wartości "top left", "bottom right" itd. */ background-image: linear-gradient( to top left, violet, orange ); } div.four { /* Kąt przechodzenia kolorów możemy również ustawić samodzielnie */ background-image: linear-gradient( 60deg, magenta, green ); } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.