HTML + CSSFondos

Terrazo pulido

Lascas de piedra de colores sobre cemento, con motas de mica que brillan y un reflejo de pulido que sigue al cursor.

Ajustes

1x
1x
1

Código

<div class="pt-uvq16-terrazzo"><svg class="tl" aria-hidden="true"><defs><pattern id="uvq16-tz-a" width="330" height="330" patternUnits="userSpaceOnUse"><polygon class="a" points="128.0,91.4 120.2,88.9 120.3,84.8 126.9,79.3 133.4,83.3"/><polygon class="b" points="168.3,124.7 171.9,117.8 182.9,114.4 187.0,125.4 179.3,132.2"/><polygon class="c" points="293.2,240.2 294.8,259.9 282.6,270.8 268.1,248.6 275.1,233.0"/><polygon class="a" points="3.4,252.6 -4.1,242.3 7.1,225.0 26.1,234.5 23.9,244.4"/><polygon class="a" points="333.4,252.6 325.9,242.3 337.1,225.0 356.1,234.5 353.9,244.4"/><polygon class="b" points="239.4,218.2 251.0,214.7 260.1,211.1 264.9,220.4 263.3,232.4 254.7,235.9 241.2,235.1"/><polygon class="c" points="93.3,165.8 84.8,155.3 89.0,139.6 108.0,144.3 115.5,149.3 101.7,165.8"/><polygon class="a" points="92.9,261.8 97.1,257.4 103.9,253.8 109.9,255.9 108.1,264.5 100.1,268.5"/><polygon class="b" points="52.5,45.3 52.8,52.2 46.6,63.7 41.3,63.2 34.3,56.6 37.5,45.5 42.8,39.5"/><polygon class="c" points="317.2,4.4 300.0,11.1 291.3,4.3 298.3,-6.0 318.1,-5.2"/><polygon class="c" points="317.2,334.4 300.0,341.1 291.3,334.3 298.3,324.0 318.1,324.8"/><polygon class="a" points="45.1,15.2 44.3,9.0 57.9,-0.3 69.2,10.6 70.2,16.7 59.1,28.8 44.7,29.0"/><polygon class="a" points="45.1,345.2 44.3,339.0 57.9,329.7 69.2,340.6 70.2,346.7 59.1,358.8 44.7,359.0"/><polygon class="b" points="77.1,194.1 83.5,201.9 83.7,208.6 73.4,211.8 64.1,201.3 70.6,189.8"/><polygon class="c" points="61.5,291.2 66.9,292.7 73.1,302.8 64.2,308.2 54.8,299.8"/><polygon class="a" points="89.8,69.3 88.9,61.1 93.6,58.5 98.6,57.0 100.2,64.2 97.7,70.8"/><polygon class="b" points="248.7,125.8 253.7,126.2 257.3,131.1 252.6,137.0 249.3,137.6 245.6,136.4 242.7,133.0"/><polygon class="c" points="291.9,130.9 287.2,115.8 289.1,106.4 307.5,107.8 309.8,118.2 312.9,128.1 300.8,134.1"/><polygon class="a" points="299.7,82.2 305.8,76.8 316.4,92.9 315.0,104.3 302.9,104.8 292.8,107.1 287.0,95.3"/><polygon class="b" points="194.4,109.0 196.4,98.0 205.5,94.7 213.7,97.6 216.2,108.2 203.8,117.0"/><polygon class="c" points="54.4,164.2 44.2,160.1 49.0,152.2 58.9,146.1 65.5,155.3 60.3,162.0"/><polygon class="a" points="80.4,212.8 80.4,196.6 92.1,191.9 106.4,200.3 108.8,210.2 95.5,223.4 83.2,220.9"/><polygon class="b" points="106.7,41.3 110.5,33.2 117.1,27.0 127.6,29.2 125.3,35.6 120.6,46.4"/><polygon class="c" points="275.7,102.4 278.7,84.5 290.9,73.2 299.9,83.4 298.0,105.9"/><polygon class="a" points="183.8,52.8 178.1,64.2 165.7,61.5 164.6,48.6 169.1,40.8 178.6,39.7"/><polygon class="a" points="25.0,157.5 23.9,159.0 22.9,159.3 20.4,158.7 20.7,157.2 21.7,155.4 24.0,155.5"/><polygon class="c" points="61.7,145.4 61.2,141.4 64.0,136.8 66.9,139.0 67.4,143.9"/><polygon class="c" points="264.1,59.0 265.0,59.3 265.8,59.6 266.0,61.3 265.0,61.8 263.8,61.5 263.0,60.1"/><polygon class="f" points="62.6,116.2 64.9,115.7 69.6,118.4 69.1,121.1 65.8,122.6 63.2,121.7 61.7,120.0"/><polygon class="a" points="121.1,146.3 123.4,145.9 126.4,148.8 123.7,150.4 121.5,150.8"/><polygon class="c" points="152.6,104.6 154.9,106.4 156.4,106.9 155.1,110.8 152.4,112.7 150.8,111.9 150.0,108.9"/><polygon class="e" points="-4.1,324.0 -3.7,318.7 -1.5,315.4 1.5,316.8 5.7,321.2 1.3,324.0 -1.3,324.5"/><polygon class="e" points="325.9,324.0 326.3,318.7 328.5,315.4 331.5,316.8 335.7,321.2 331.3,324.0 328.7,324.5"/><polygon class="b" points="241.4,180.1 244.6,179.8 244.9,186.3 242.6,185.7 238.8,187.2 237.0,183.8 237.5,180.9"/><polygon class="b" points="265.7,200.4 264.6,203.4 260.3,203.3 257.8,202.9 258.4,197.8 262.1,197.6"/><polygon class="e" points="283.5,222.2 281.9,222.6 280.4,221.4 279.8,219.5 281.0,219.1 282.9,219.0 283.6,220.6"/><polygon class="a" points="243.9,274.9 245.8,277.4 244.3,280.2 240.2,281.3 238.3,280.4 238.3,276.2"/><polygon class="b" points="76.5,99.9 76.5,102.6 74.8,103.8 73.6,101.9 73.6,99.0 75.3,97.7"/></pattern><pattern id="uvq16-tz-b" width="210" height="210" patternUnits="userSpaceOnUse"><polygon class="f" points="173.5,76.3 172.8,75.0 173.6,73.9 174.5,73.8 175.9,74.1 175.7,75.4 175.2,75.9"/><polygon class="a" points="137.5,114.3 139.6,118.1 136.9,119.3 135.4,118.7 133.8,117.2 135.0,115.4"/><polygon class="c" points="171.0,15.0 168.8,10.7 174.1,7.0 176.5,9.9 176.4,14.0"/><polygon class="c" points="144.5,47.5 142.4,46.4 142.1,44.1 143.3,43.6 146.1,44.0 146.4,45.3 145.3,47.8"/><polygon class="a" points="23.2,46.1 25.5,46.4 27.5,49.9 23.4,52.8 19.8,50.1 20.1,47.4"/><polygon class="e" points="121.1,107.8 120.5,104.9 122.1,102.1 125.8,103.3 129.7,106.2 128.8,108.3 125.1,109.6"/><polygon class="c" points="95.5,49.1 97.5,47.3 99.1,48.6 98.4,51.6 95.6,51.5"/><polygon class="f" points="62.6,9.6 61.1,12.7 55.6,14.5 54.2,9.2 58.2,5.7"/><polygon class="a" points="78.0,38.0 84.3,37.8 85.6,43.8 83.3,44.9 79.4,44.8 76.4,40.6"/><polygon class="e" points="30.9,178.0 33.5,174.7 37.8,175.9 37.7,180.2 34.0,182.2 32.2,181.7"/><polygon class="b" points="7.8,197.9 9.3,195.7 11.7,197.8 12.1,201.7 9.5,202.2 8.2,202.1 7.1,199.2"/><polygon class="e" points="145.3,60.5 148.0,57.9 150.3,57.5 153.6,61.1 150.4,65.2 146.4,63.1"/><polygon class="f" points="86.8,38.8 82.0,39.9 78.1,37.5 79.6,33.2 86.0,34.7"/><polygon class="c" points="64.1,71.9 66.5,71.0 67.2,74.5 64.9,75.3 62.8,73.7"/><polygon class="c" points="168.8,106.3 172.4,109.8 170.3,113.2 167.0,112.3 166.0,110.9 165.1,107.5"/><polygon class="e" points="48.9,90.9 42.1,90.9 40.5,87.3 44.4,83.0 50.3,85.7"/><polygon class="a" points="159.1,65.5 161.1,63.5 162.4,62.2 164.8,64.4 163.6,65.9 162.7,67.2 158.9,66.7"/><polygon class="b" points="202.3,166.9 203.8,166.0 206.9,167.3 207.3,169.5 205.6,170.9 202.0,170.9"/><polygon class="b" points="187.5,62.2 185.4,63.0 184.1,61.4 183.2,59.9 185.1,58.3 187.4,58.8"/><polygon class="b" points="7.4,37.0 11.3,35.1 14.0,38.9 14.4,42.2 12.0,46.5 10.0,45.8 6.3,42.8"/><polygon class="f" points="126.6,169.2 129.2,165.8 131.7,167.1 132.6,167.8 132.8,170.1 131.4,172.3 127.5,170.6"/><polygon class="e" points="162.9,133.2 162.2,135.1 160.1,135.5 159.0,135.5 157.8,132.6 158.5,131.1 161.1,131.8"/><polygon class="b" points="14.1,81.0 16.9,82.9 16.9,85.6 13.4,86.2 12.8,82.7"/><polygon class="a" points="4.3,74.4 1.3,76.1 -0.6,73.6 -0.4,71.5 2.0,70.6 4.3,72.6"/><polygon class="a" points="214.3,74.4 211.3,76.1 209.4,73.6 209.6,71.5 212.0,70.6 214.3,72.6"/><polygon class="a" points="108.9,-3.1 109.1,-1.0 107.2,-0.1 105.5,-0.5 105.8,-2.0 106.1,-3.3 108.0,-3.5"/><polygon class="a" points="108.9,206.9 109.1,209.0 107.2,209.9 105.5,209.5 105.8,208.0 106.1,206.7 108.0,206.5"/><polygon class="b" points="108.5,116.0 106.0,116.2 105.8,114.4 105.9,113.4 106.6,112.7 108.9,113.0 109.2,113.9"/><polygon class="e" points="99.8,33.7 99.6,35.7 98.2,35.6 96.7,33.7 98.4,32.7"/><polygon class="a" points="117.7,23.4 117.0,19.9 118.4,18.6 121.1,18.8 122.9,22.6 122.4,23.9 118.8,24.6"/><polygon class="a" points="140.7,14.5 145.2,15.1 147.1,18.8 145.3,21.6 143.2,22.5 141.2,21.1 139.9,17.2"/><polygon class="a" points="27.8,76.4 26.9,78.3 25.1,77.6 25.2,75.6 27.0,75.5"/><polygon class="a" points="93.9,61.3 93.2,61.9 91.5,60.5 91.3,59.3 92.1,58.7 93.5,58.9 94.6,60.7"/><polygon class="a" points="107.3,62.5 105.0,66.2 102.3,64.0 100.5,62.2 102.8,58.9 104.9,58.8 107.4,59.2"/><polygon class="e" points="178.7,194.8 177.4,195.0 176.1,193.9 177.1,192.2 179.0,193.1"/><polygon class="f" points="163.8,49.9 164.4,47.6 169.8,46.9 170.2,50.9 166.5,54.1"/><polygon class="e" points="151.4,112.9 150.4,115.5 147.6,115.2 147.5,113.4 150.2,111.7"/><polygon class="a" points="181.3,172.0 181.9,176.4 178.3,177.3 176.8,174.8 178.9,172.9"/><polygon class="f" points="121.8,90.3 120.3,89.1 120.5,85.9 123.3,86.0 124.8,88.1"/><polygon class="a" points="19.5,83.9 17.1,83.5 16.6,80.6 18.6,80.1 20.6,81.1"/><polygon class="e" points="25.4,200.2 25.4,195.2 29.2,193.1 34.5,196.9 30.4,201.1"/><polygon class="e" points="192.2,82.2 190.9,84.4 185.9,82.3 186.3,78.5 188.5,77.1 192.1,78.9"/><polygon class="b" points="154.9,4.1 152.9,7.3 148.2,7.4 147.3,5.5 145.9,2.7 148.3,-0.0 153.1,-0.2"/><polygon class="b" points="154.9,214.1 152.9,217.3 148.2,217.4 147.3,215.5 145.9,212.7 148.3,210.0 153.1,209.8"/><polygon class="e" points="93.5,150.2 91.0,146.3 94.8,140.7 97.4,144.0 97.7,148.1"/><polygon class="b" points="68.3,18.4 74.8,19.8 76.1,22.1 70.0,27.4 66.4,23.9 66.5,21.5"/><polygon class="b" points="34.4,23.9 32.2,22.4 32.1,17.7 36.2,16.2 39.2,20.2 37.3,22.2"/><polygon class="e" points="72.7,185.3 72.5,186.6 69.6,189.4 66.5,188.9 65.1,185.3 67.7,184.0 70.3,182.9"/><polygon class="f" points="41.2,138.9 44.7,132.1 51.7,134.8 52.0,139.5 45.3,141.4"/></pattern></defs><rect width="100%" height="100%" fill="url(#uvq16-tz-a)"/><rect width="100%" height="100%" fill="url(#uvq16-tz-b)"/></svg><div class="mi"><i style="--x:0.0%;--y:34.1%;--dl:-4.67s"></i><i style="--x:13.5%;--y:58.1%;--dl:-1.13s"></i><i style="--x:55.2%;--y:40.3%;--dl:-2.08s"></i><i style="--x:84.5%;--y:65.6%;--dl:-0.70s"></i><i style="--x:42.2%;--y:14.1%;--dl:-3.82s"></i><i style="--x:48.0%;--y:14.8%;--dl:-1.27s"></i><i style="--x:65.3%;--y:20.6%;--dl:-3.89s"></i><i style="--x:66.3%;--y:43.6%;--dl:-3.52s"></i><i style="--x:92.4%;--y:38.9%;--dl:-0.17s"></i><i style="--x:57.9%;--y:72.8%;--dl:-0.70s"></i><i style="--x:4.1%;--y:15.3%;--dl:-3.30s"></i><i style="--x:56.6%;--y:29.1%;--dl:-4.16s"></i><i style="--x:87.7%;--y:96.2%;--dl:-3.52s"></i><i style="--x:5.6%;--y:15.2%;--dl:-2.12s"></i><i style="--x:84.8%;--y:86.1%;--dl:-2.50s"></i><i style="--x:39.9%;--y:84.4%;--dl:-0.98s"></i><i style="--x:99.9%;--y:40.2%;--dl:-1.47s"></i><i style="--x:76.5%;--y:84.7%;--dl:-0.36s"></i><i style="--x:85.6%;--y:49.5%;--dl:-0.28s"></i><i style="--x:62.3%;--y:0.4%;--dl:-4.99s"></i><i style="--x:85.4%;--y:64.9%;--dl:-0.19s"></i><i style="--x:52.8%;--y:55.9%;--dl:-1.51s"></i></div><i class="lt"></i><i class="sh"></i></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Fondos

Ver todos: Fondos

Dónde usarlo

Un suelo de terrazo hecho en SVG. Se superponen dos teselas de tamaños distintos, una con lascas grandes y otra con grano fino, así que la repetición casi no se nota. Una textura de grano da cuerpo al cemento, unas motas de mica parpadean al azar y una franja de luz pasa como sobre una superficie recién pulida. Va bien con interiorismo, cerámica y cafeterías.

Los tres colores pintan las lascas y la base se adapta al tema claro u oscuro. La densidad hace las piedras más pequeñas y numerosas. Pon el texto sobre una tarjeta sólida, porque a plena opacidad el fondo tiene mucho detalle.