CSS3 nos aporta entre otras novedades la propiedad gradient, que nos permite mostrar transiciones suaves entre dos o más colores.

Antes, teníamos que utilizar imágenes para conseguir estos efectos, sin embargo, mediante el uso de la propiedad gradient, podemos reducir el tiempo de carga de la página y el uso de ancho de banda. Además, los elementos con gradient se ven mejor cuando se hace zoom, debido a que el gradiente es generado por el navegador.

CSS3 define dos tipos de gradientes:

linear-gradient
Los gradientes lineales (arriba / abajo / izquierda / derecha / diagonal)

radial-gradient
Los gradientes radiales (definido por su centro)

En la web de W3Schools podemos encontrar una referencia completa de esta nueva propiedad de CSS3
CSS3 Gradient (W3Schools)

Ejemplos gradient CSS3

 

CRYSTAL 1
background: linear-gradient(45deg, #99DDDD 2%, #99CCFF 60%);
background-size: 25px 25px;

CRYSTAL 2

background:
	linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%, transparent 75%) 0 0,
	linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%, transparent 75%) 0 0;
background-color: #99CCFF; 
background-size: 25px 25px;

CRYSTAL 3

background-color: #5599FF;
background-image: 
	linear-gradient(45deg, transparent 10%, rgba(255,255,233,.12)100%);
background-size: 100px;

STEEL 1

background:
	linear-gradient( hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
	linear-gradient( hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #444444; 
background-size: 30px 30px;

STEEL 2

background:
	linear-gradient(90deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
	linear-gradient(-90deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #222222; 
background-size: 40px;

STEEL 3

background:
	linear-gradient(0deg, hsla(0, 90%, 20%, 0) 50%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
	linear-gradient(-90deg, hsla(0, 90%, 20%, 0) 50%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #333333; 
background-size: 60px 60px;

PINK GUM 1

background: 
	radial-gradient( circle, #FFFFCC, #FFCCCC 80%, #FAFAFA);
background-size: 20px 20px;

STARS 1

background-color: #CC99CC;
background-size: 50px 50px;
background-image: 
	linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, 
	transparent 25%, 
	transparent 75%, 
	rgba(0, 0, 0, 0.1) 75%);

WARM 1

background: 
	linear-gradient( 10deg, 
	#FF3300 0%, 
	#FF6600 25%, 
	#FF9900 50%, 
	#FFCC00 75%, 
	#FFFF66 100%);
background-size: 100%;
background-color: #840b2a;

SILKY 1

background: 
	linear-gradient( 40deg, 
	#9933CC 0%, 
	#6666FF 25%, 
	#669999 50%, 
	#66CC66 75%, 
	#33FFCC 100%);
background-size: 100%;
background-color: #840b2a;

LINES 1

background-color: #FFCC99;
background-image: linear-gradient(90deg, 
	transparent 50%, 
	rgba(255,255,255,.2) 50%);
background-size: 30px 30px;

LINES 2

background: repeating-linear-gradient(-45deg, 
	#FFCCCC, 
	#FFCCCC 10px, 
	#CCCCFF 10px, 
	#CCCCFF 20px);

LINES 3

background-color: #99FFCC;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%);
background-size: 30px 30px;

LINES 4

background: repeating-linear-gradient(-45deg, 
	#85c2ff, 
	#99CCFF 10px, 
	#85c2ff 10px, 
	#99CCFF 20px);

FABRIC 1

background-color:#FFFFFF;
background-image: 
	linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
	linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;

FABRIC 2

background-color: #2e492c;
background-image: 
	repeating-linear-gradient(90deg, transparent, transparent 50px,
	rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
	rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
	rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
	repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
	rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
	rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
	rgba(255, 206, 0, 0.25) 166px);

FABRIC 3

background-color:#FFCC66;
background-image: 
	radial-gradient(#FFFFFF 10%, transparent 10%),
	radial-gradient(#FFFFFF 10%, transparent 10%);
background-size:50px 50px;
background-position: 0 0, 25px 25px;

FABRIC 4

background-color: #FFCC99;
background-image: 
	repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 10px,
	rgba(143, 77, 63, 0.25) 20px),
	repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 10px,
	rgba(143, 77, 63, 0.25) 20px);

CIRCLE 1

background: repeating-radial-gradient(
	circle,
	#FF7777,
	#FF7777 10px,
	#FF8777 10px, 
	#FF8777 20px;

DARK 1

background:
	radial-gradient(#FFFFFF 1%, transparent 2%) 0 0,
	radial-gradient(rgba(255,255,255,.1) 5%, transparent 30%) 0 1px;
background-color:#111111;
background-size:25px 25px;

CHESS 1

background-color: #FFCC99;
background-size: 50px 50px;
background-image: 
	linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000),
	linear-gradient(135deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);

SQUARE 1

background-color: #FF9966;
background-image: 
	linear-gradient(-45deg, transparent 50%, rgba(255,255,255,.2) 50%),
	linear-gradient(-90deg, transparent 50%, rgba(255,255,255,.2) 50%), 
	linear-gradient(-135deg, transparent 50%, rgba(255,255,255,.2) 50%), 
	linear-gradient(-180deg, transparent 50%, rgba(255,255,255,.2) 50%);
background-size: 30px 30px;

Ver el código en Github

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

CAPTCHA


Utilizamos cookies propias y de terceros para el correcto funcionamiento de la web, personalizar el contenido y mostrar publicidad en función de las preferencias del visitante. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies