Live
x
<html> <head> <title>Radial gradient</title> <style> div { margin: 10px; height: 300px; border-radius: 40px; } div.one { /* Domyślnie kolory rozchodzą się od środka w kierunku wszystkich brzegów. W tym przykładzie nasz <div> jest kwadratem, więc gradient rozchodzi się symetrycznie (po okręgu). */ width: 300px; background-image: radial-gradient(red, blue); } div.two { /* W tym przykładzie nasz element jest prostokątem, więc domyślnie gradient ma kształ elipsy, a nie okręgu jak miało to miejsce wcześniej. */ background-image: radial-gradient(red, blue); } div.three { /* Możemy jednak wymusić okrągły gradient na niekwadratowych elementach podając wartość "circle" przed kolorami. */ background-image: radial-gradient( circle, red, blue ); } div.four { /* Domyślnie gradient "rozlewa się" na cały element (tzn. sięga do najdalszej krawędzi). Możemy to zachowanie zmienić i określić jak daleko ma sięgać. Dopuszczalne wartości to: "closest-corner" | "closest-side" | "farthest-corner", "farthest-side" */ background-image: radial-gradient( circle closest-side, red, blue ); } div.five { /* Gradient nie musi zaczynać się w samym środku i możemy ustawić jego początek podobnie jak w gradiecie liniowym za pomocą "at". */ background-image: radial-gradient( circle at top right, red, blue ); } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></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.