Color
#
Opacity
Draw a pattern on the grid, and use the
- {"matrix":[[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4}
- {"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":5,"ycursor":5}
- {"matrix":[[[0,0,0,0.2],0,0,[0,0,0,0.5],[0,0,0,0.1],0,0,[0,0,0,1],0,0],[0,[0,0,0,0.2],[0,0,0,0.5],0,0,[0,0,0,0.1],[0,0,0,1],0,0,0],[0,[0,0,0,0.5],[0,0,0,0.2],0,0,[0,0,0,1],[0,0,0,0.1],0,0,0],[[0,0,0,0.5],0,0,[0,0,0,0.2],[0,0,0,1],0,0,[0,0,0,0.1],0,0],[[0,0,0,0.1],0,0,[0,0,0,1],[0,0,0,0.2],0,0,[0,0,0,0.5],0,0],[0,[0,0,0,0.1],[0,0,0,1],0,0,[0,0,0,0.2],[0,0,0,0.5],0,0,0],[0,[0,0,0,1],[0,0,0,0.1],0,0,[0,0,0,0.5],[0,0,0,0.2],0,0,0],[[0,0,0,1],0,0,[0,0,0,0.1],[0,0,0,0.5],0,0,[0,0,0,0.2],0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":8,"ycursor":8}
- {"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0]],"xcursor":10,"ycursor":8}
- {"matrix":[[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4}
- {"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,[0,0,0,1],0],[0,0,0,0,0,0,0,[0,0,0,1],0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":9,"ycursor":9}
- {"matrix":[[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2]],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2]],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2]],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0],[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2]]],"xcursor":10,"ycursor":10}
- {"matrix":[[[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":7,"ycursor":7}
- {"matrix":[[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0],[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[0,0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1]],[0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0],[[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0],[0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1]],[0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0],[[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0],[[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1]],[0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1]],[0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0],[[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0],[0,0,0,[255,61,216,1],[245,147,225,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],[189,51,159,1],0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0],[[8,37,153,1],[127,223,240,1],[48,175,184,1],[8,37,153,1],0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[36,64,179,1],[127,223,240,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":6,"ycursor":4}
- {"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3]],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],[0,0,0,1],[0,0,0,1]],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0],[0,["0","0","0",1],[235,136,61,1],[235,136,61,1],0,[41,179,46,1],["0","0","0",1],0,0,0],[0,0,["0","0","0",1],[235,136,61,1],[235,136,61,1],[41,179,46,1],[41,179,46,1],["0","0","0",1],0,0],[0,0,0,["0","0","0",1],[235,136,61,1],0,[41,179,46,1],[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[0,0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],0],[0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1]],[0,0,0,0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,[55,122,199,1],[55,122,199,1],0],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}
- {"matrix":[[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[230,230,7,1],[230,230,7,1],[71,41,15,1],[230,230,7,1],[230,230,7,1],[44,145,23,1],[44,145,23,1],[44,145,23,1],[44,145,23,1]],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1]],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1],[44,145,23,1]],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[44,145,23,1],[44,145,23,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]]],"xcursor":10,"ycursor":10}
- {"matrix":[[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1]],[[0,0,0,1],0,0,0,0,0,[0,0,0,1],0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]]],"xcursor":10,"ycursor":10}
- {"matrix":[[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[133,89,13,1],[133,89,13,1],[133,89,13,1],[19,110,37,1]],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1]]],"xcursor":10,"ycursor":10}
CSS background Pattern Generator
- Pattern options: The tool should provide a variety of pattern options that users can choose from, such as stripes, dots, checks, or mosaic.
- Pattern size options: The tool should allow users to adjust the size of the pattern, such as the width and height of individual elements in the pattern.
- Pattern color options: The tool should allow users to choose the color of the pattern elements.
- Pattern repeat options: The tool should allow users to specify how the pattern should repeat, such as vertically, horizontally, or both.
- Preview option: The tool should provide a preview of the pattern so that the user can see the changes they are making in real-time.
- Code output: The tool should generate the CSS code for the pattern that the user can copy and paste into their own website.
- Responsiveness: The tool should allow users to specify different styles for different screen sizes, so the pattern adapts to different devices.
- User-friendly interface: The tool should have an intuitive, user-friendly interface that makes it easy for users to create and customize their patterns.
- Accessibility: The tool should generate code that is accessible, including using appropriate ARIA attributes for screen readers.
- Customization options: The tool should allow users to create their own patterns from scratch or by combining multiple patterns.
- CSS editing: The tool should allow users to edit the generated CSS code directly, for those who are familiar with CSS and want to make more advanced modifications.