HTML + CSSFondos

Pétalos cayendo

Pétalos que caen girando en 3D y se balancean de lado a lado, como si los llevara una brisa suave.

Ajustes

1x
1x
1

Código

<div class="pt-petals"><i style="left:0.0%;--t:17.9s;--dl:-4.9s;--sz:12.2px;--sw:42.1px"></i><i style="left:63.4%;--t:10.7s;--dl:-17.4s;--sz:20.7px;--sw:26.3px"></i><i style="left:87.4%;--t:18.5s;--dl:-11.2s;--sz:16.3px;--sw:37.6px"></i><i style="left:30.7%;--t:15.3s;--dl:-6.8s;--sz:20.4px;--sw:67.1px"></i><i style="left:36.9%;--t:12.2s;--dl:-18.3s;--sz:21.3px;--sw:31.6px"></i><i style="left:18.5%;--t:10.5s;--dl:-15.4s;--sz:13.6px;--sw:62.6px"></i><i style="left:5.4%;--t:15.4s;--dl:-11.0s;--sz:11.1px;--sw:39.4px"></i><i style="left:44.2%;--t:18.4s;--dl:-5.6s;--sz:17.3px;--sw:23.7px"></i><i style="left:87.0%;--t:12.3s;--dl:-15.9s;--sz:11.8px;--sw:53.3px"></i><i style="left:19.8%;--t:17.9s;--dl:-18.5s;--sz:22.0px;--sw:30.1px"></i><i style="left:72.6%;--t:10.2s;--dl:-9.2s;--sz:11.2px;--sw:60.4px"></i><i style="left:32.6%;--t:14.1s;--dl:-9.9s;--sz:10.1px;--sw:53.2px"></i><i style="left:80.5%;--t:12.0s;--dl:-14.3s;--sz:10.4px;--sw:40.6px"></i><i style="left:73.5%;--t:17.1s;--dl:-19.8s;--sz:18.4px;--sw:32.2px"></i><i style="left:3.1%;--t:19.0s;--dl:-3.8s;--sz:12.5px;--sw:35.4px"></i><i style="left:43.6%;--t:14.0s;--dl:-4.1s;--sz:16.1px;--sw:64.5px"></i><i style="left:42.4%;--t:15.2s;--dl:-14.0s;--sz:13.5px;--sw:30.1px"></i><i style="left:70.0%;--t:13.9s;--dl:-18.4s;--sz:21.7px;--sw:24.9px"></i><i style="left:26.1%;--t:14.8s;--dl:-8.9s;--sz:17.0px;--sw:20.4px"></i><i style="left:22.3%;--t:11.3s;--dl:-0.5s;--sz:20.2px;--sw:33.9px"></i><i style="left:64.1%;--t:15.9s;--dl:-12.7s;--sz:20.2px;--sw:58.2px"></i><i style="left:15.3%;--t:13.1s;--dl:-9.1s;--sz:16.2px;--sw:66.7px"></i><i style="left:3.6%;--t:19.2s;--dl:-8.0s;--sz:12.3px;--sw:44.7px"></i><i style="left:5.0%;--t:10.3s;--dl:-7.2s;--sz:15.4px;--sw:56.9px"></i><i style="left:0.4%;--t:10.8s;--dl:-2.6s;--sz:12.7px;--sw:29.1px"></i><i style="left:23.2%;--t:12.7s;--dl:-11.1s;--sz:21.5px;--sw:68.6px"></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.

Más en Fondos

Dónde usarlo

Los pétalos que caen son un detalle romántico y delicado para la web de una boda, la colección de primavera de una floristería o un restaurante japonés en época de cerezos en flor. Cada pétalo tiene su tamaño, velocidad y balanceo, así que la caída parece natural. Un fondo de pétalos cayendo en CSS, sin imágenes.

Por defecto va en rosa sobre índigo, pero con pétalos blancos sobre verde suave suena a primavera, y en dorado sobre azul marino parece de fiesta. Detrás de formularios y fotos de producto, hazlos más pequeños o baja la opacidad para que nada parezca caer sobre el botón de compra.