La función radial-gradient() es una función incorporada en CSS que se utiliza para establecer un degradado radial como imagen de fondo. Comienza en un solo punto y emana hacia afuera. De forma predeterminada, el primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad hasta que se especifica.
Sintaxis:
background-image: radial-gradient( shape size at position, start-color, ..., last-color );
Parámetros: esta función acepta muchos parámetros que se enumeran a continuación:
- forma: este parámetro se utiliza para definir la forma del degradado. Tiene dos posibles valores círculo o elipse. El valor de forma predeterminado es elipse.
- tamaño: este parámetro se utiliza para definir el tamaño del degradado. Los valores posibles son: esquina más lejana (predeterminado), lado más cercano, esquina más cercana, lado más lejano.
- position: este parámetro se utiliza para definir la posición del degradado. El valor predeterminado es el centro.
- start-color, …, last-color: este parámetro se utiliza para mantener el valor del color seguido de su posición de parada opcional.
El siguiente ejemplo ilustra la función radial-gradient() en CSS:
Programa 1:
html
<!DOCTYPE html> <html> <head> <title>CSS Gradients</title> <style> #main { height: 250px; width: 600px; background-color: white; background-image: radial-gradient(#090, #fff, #2a4f32); } .gfg { text-align:center; font-size:40px; font-weight:bold; padding-top:80px; } .geeks { font-size:17px; text-align:center; } </style> </head> <body> <div id="main"> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </div> </body> </html>
Producción:
Programa 2:
html
<!DOCTYPE html> <html> <head> <title>CSS Gradients</title> <style> #main { height: 400px; width: 600px; background-color: white; background-image: radial-gradient(circle, green, white, blue); } .gfg { text-align:center; font-size:40px; font-weight:bold; padding-top:155px; } .geeks { font-size:17px; text-align:center; } </style> </head> <body> <div id="main"> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </div> </body> </html>
Producción:
Navegador compatible:
- Google cromo 26
- Borde 12
- explorador de Internet 10
- Firefox 16
- Ópera 12.1
- Safari 7