15 Complejos fondos con patrones (patterns) realizados únicamente con código CSS3

@ 22 . septiembre . 2011

fondo con patrón pattern y CSS3

En la galería de Leaverou: CSS3 Patterns hay muchos ejemplos de como crear fondos con patrones para usar en los diseños de tus páginas web, pero lo interesante es que todos se realizan con algunas líneas de código CSS3, sin el uso de ninguna imagen, sin la necesidad de que abras Photoshop (o un editor de imágenes) y con la libertad de crear una variada diversidad de fondos interesantes y de un peso de solo unos cuantos Bytes, ya sean a rayas o con figuras.

(y) Si bien el ahorro de Bytes es notable, este código también significa una llamada menos a un archivo de imagen en tu servidor y te ahorras todo eso.
(y) Otra ventaja es que si un día te aburriste del fondo, con un cambio en el código y puedes modificarlo en forma y color a gusto.

A continuación el screenshot y el código de los más interesantes:

Fondo: Upholstery (939 B)
Upholstery fondo con patrón pattern y CSS3
Código CSS3:

background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300; 
background-size: 100px 100px;

Barras diagonales (160B)
CSS3 fondo lineas inclinadas

Código CSS3:

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

Fondo: Marrakesh (350 B)
Marrakesh fondo con patrón pattern y CSS3
Código CSS3:

background-color:white;
background-image:
  radial-gradient(midnightblue 9px, transparent 10px),        
  repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;

Fondo: Madras (1.56 KB)
Madras fondo con patrón pattern y CSS3
Código CSS3:

background-color: hsl(34, 53%, 82%);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,                  
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px       
      ),
  repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px       
  );

Fondo: Rainbow bokeh (1.05 KB)
Rainbow bokeh fondo con patrón pattern y CSS3
Código CSS3:

background: 
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
  radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
  linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;

Fondo: Hearts (943 B)
Hearts fondo con patrón pattern y CSS3
Código CSS3:

background: 
  radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%),
  radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%),
  radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%),
  radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%),
  radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%),

  radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
  radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
  radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
  radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
  radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;

Fondo: Bricks (357 B)
Bricks fondo con patrón pattern y CSS3
Código CSS3:

background-color: silver;
background-image: linear-gradient(115deg, #b00 23px, transparent 23px),
	linear-gradient(295deg, #d00 23px, transparent 23px),
	linear-gradient(115deg, #b00 23px, transparent 23px),
	linear-gradient(295deg, #d00 23px, transparent 23px);
background-size: 58px 58px;	
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

Fondo: Carbon fibre (313 B)
Carbon fibre fondo con patrón pattern y CSS3
Código CSS3:

background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

Fondo: Tartan (1.15 KB)
Tartan fondo escocés pattern y CSS3
Código CSS3:

background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
  repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
  repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

Fondo: Cicada stripes (351 B)
Cicada stripes fondo con patrón pattern y CSS3
Código CSS3:

background-color: #026873;
background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;

Fondo: Houndstooth (460 B)
Houndstooth fondo con patrón pattern y CSS3
Código CSS3:

background:
  linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0,
  linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em,
  linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em;
background-color: white;
background-size: 2em 2em;

Fondo: Japanese cube (691 B)
Japanese cube fondo con patrón pattern y CSS3
Código CSS3:

background-color:#556;
background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

Fondo: Seigaiha (1015 B)
Seigaiha fondo con patrón pattern y CSS3
Código CSS3:

background-color:silver;
background-image: 
	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(50%  100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
	radial-gradient(100% 50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
	radial-gradient(0    50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;

Fondo: Stars (937 B)
estrellas fondo con patrón pattern y CSS3
Código CSS3:

background:
    linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
    linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
    linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
    linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
    linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
    linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
    
    linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
    linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
    linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
    linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
    linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
    linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;

Fondo: Yin Yang (878 B)
Yin Yang fondo con patrón pattern y CSS3
Código CSS3:

background: 
  radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
  radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
  radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
  radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
  radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%),
  radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%),
  radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
  radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color:#63773F;
background-size:100px 100px;

Fondo: Blueprint grid (394 B)
Blueprint grid fondo con patrón pattern y CSS3
Código CSS3:

background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(0, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px

Esto es increíble (y) :o

Autor del post: DanielSemper: @aeromental + Facebook

Diseño
«
»
  • Konfleis

    asombroso!!! simplemente asomobroso

  • Neytan

    donde esta la fuente de donde sacas esto ??? O.o’

  • Neytan:

    En la quinta palabra del post esta la fuente de todo esto!!!!

    En la galería de Leaverou: CSS3 Patterns

    Si eres daltónico y no viste el azul del link, este también viene subrayado. De lo contrario pienso que fuiste muy flojo en leer 5 palabras, pero no en escribir 8 para quejarte :troll:

  • Jonathan

    @Daniel!
    No seas tan duro con Neytan, creo que es la 2da o 3era vez que veo una respuesta demasiado sarcastica, recuerda que Aeromental existe y se mantiene gracias a tus lectores ;)

  • Maos

    si Daniel no seas tan duro con neytan @neytan buu neytan, eres ciego o no sabes leer, la maquina que lee por ti no dijo subraado, que que siga lo que predico, hay no me vengan con eso, como que de ejemplo? hey hey, el que aconseje no quiere decir que quiera seguir los consejos que doy…

    P.d lo digo en broma neytan no es una ofensa, no lo vayas a tomar así me oíste pen… ok no sigo con mas pero solo es broma, lo mismo para dani, (solo que vengo de una interesantisima clase de informática basica, en la que doy cosas que ya se, pero es obligatorio que la vea ¬¬ frustrante y aburrido), a veces nos pasan esas cosas viejo la vida sigue!! jeje

  • Axel-R

    Excelente aporte (y)

  • mongo

    Guauu.. CSS3 is great!