Crearemos una ventana, en ella tendremos la siguiente estructura:
Para el fondo animado, copiaremos el siguiente código y lo pegaremos en el BackgroudImage de la ventana.
"data:image/svg+xml;utf8, " & EncodeUrl(
"<svg width='100%' height='100%' id='svg' viewBox='0 0 1440 590' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'><style>
.path-0{
animation:pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0{
0%{
d: path('M 0,600 L 0,150 C 119.3205741626794,110.9090909090909 238.6411483253588,71.81818181818183 330,96 C 421.3588516746412,120.18181818181817 484.7559808612441,207.63636363636363 576,237 C 667.2440191387559,266.3636363636364 786.334928229665,237.63636363636363 872,247 C 957.665071770335,256.3636363636364 1009.9043062200958,303.8181818181818 1099,344 C 1188.0956937799042,384.1818181818182 1314.047846889952,417.0909090909091 1440,450 L 1440,600 L 0,600 Z');
}
25%{
d: path('M 0,600 L 0,150 C 69.31100478468898,150.99521531100478 138.62200956937795,151.99043062200957 247,186 C 355.37799043062205,220.00956937799043 502.82296650717706,287.03349282296654 608,292 C 713.1770334928229,296.96650717703346 776.0861244019137,239.87559808612443 856,230 C 935.9138755980863,220.12440191387557 1032.8325358851675,257.4641148325359 1133,302 C 1233.1674641148325,346.5358851674641 1336.5837320574162,398.26794258373207 1440,450 L 1440,600 L 0,600 Z');
}
50%{
d: path('M 0,600 L 0,150 C 106.9377990430622,133.96172248803828 213.8755980861244,117.92344497607655 306,122 C 398.1244019138756,126.07655502392345 475.4354066985645,150.26794258373207 575,180 C 674.5645933014355,209.73205741626793 796.3827751196171,245.0047846889952 885,290 C 973.6172248803829,334.9952153110048 1029.0334928229665,389.7129186602871 1116,418 C 1202.9665071770335,446.2870813397129 1321.4832535885166,448.14354066985646 1440,450 L 1440,600 L 0,600 Z');
}
75%{
d: path('M 0,600 L 0,150 C 114.40191387559813,120.41148325358851 228.80382775119625,90.82296650717703 317,115 C 405.19617224880375,139.17703349282297 467.1866028708133,217.11961722488036 562,256 C 656.8133971291867,294.88038277511964 784.4497607655503,294.6985645933014 884,309 C 983.5502392344497,323.3014354066986 1055.0143540669856,352.08612440191393 1143,378 C 1230.9856459330144,403.91387559808607 1335.4928229665072,426.95693779904303 1440,450 L 1440,600 L 0,600 Z');
}
100%{
d: path('M 0,600 L 0,150 C 119.3205741626794,110.9090909090909 238.6411483253588,71.81818181818183 330,96 C 421.3588516746412,120.18181818181817 484.7559808612441,207.63636363636363 576,237 C 667.2440191387559,266.3636363636364 786.334928229665,237.63636363636363 872,247 C 957.665071770335,256.3636363636364 1009.9043062200958,303.8181818181818 1099,344 C 1188.0956937799042,384.1818181818182 1314.047846889952,417.0909090909091 1440,450 L 1440,600 L 0,600 Z');
}
}</style><defs><linearGradient id='gradient' x1='50%' y1='100%' x2='50%' y2='0%'><stop offset='5%' stop-color='#eb144c'></stop><stop offset='95%' stop-color='#9900ef'></stop></linearGradient></defs><path d='M 0,600 L 0,150 C 119.3205741626794,110.9090909090909 238.6411483253588,71.81818181818183 330,96 C 421.3588516746412,120.18181818181817 484.7559808612441,207.63636363636363 576,237 C 667.2440191387559,266.3636363636364 786.334928229665,237.63636363636363 872,247 C 957.665071770335,256.3636363636364 1009.9043062200958,303.8181818181818 1099,344 C 1188.0956937799042,384.1818181818182 1314.047846889952,417.0909090909091 1440,450 L 1440,600 L 0,600 Z' stroke='none' stroke-width='0' fill='url(#gradient)' fill-opacity='0.53' class='transition-all duration-300 ease-in-out delay-150 path-0'></path><style>
.path-1{
animation:pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1{
0%{
d: path('M 0,600 L 0,350 C 98.54545454545453,308.6411483253588 197.09090909090907,267.2822966507177 283,292 C 368.90909090909093,316.7177033492823 442.18181818181824,407.5119617224881 542,450 C 641.8181818181818,492.4880382775119 768.1818181818181,486.66985645933016 873,490 C 977.8181818181819,493.33014354066984 1061.0909090909092,505.8086124401914 1152,534 C 1242.9090909090908,562.1913875598086 1341.4545454545455,606.0956937799043 1440,650 L 1440,600 L 0,600 Z');
}
25%{
d: path('M 0,600 L 0,350 C 79.38755980861242,317.933014354067 158.77511961722485,285.86602870813397 269,310 C 379.22488038277515,334.13397129186603 520.2870813397129,414.46889952153094 619,461 C 717.7129186602871,507.53110047846906 774.0765550239234,520.2583732057418 870,527 C 965.9234449760766,533.7416267942582 1101.4066985645934,534.4976076555023 1203,554 C 1304.5933014354066,573.5023923444977 1372.2966507177034,611.7511961722489 1440,650 L 1440,600 L 0,600 Z');
}
50%{
d: path('M 0,600 L 0,350 C 63.60765550239233,330.13397129186603 127.21531100478467,310.267942583732 242,316 C 356.78468899521533,321.732057416268 522.7464114832536,353.0622009569378 622,385 C 721.2535885167464,416.9377990430622 753.7990430622009,449.48325358851673 823,496 C 892.2009569377991,542.5167464114833 998.0574162679427,603.0047846889952 1107,631 C 1215.9425837320573,658.9952153110048 1327.9712918660287,654.4976076555024 1440,650 L 1440,600 L 0,600 Z');
}
75%{
d: path('M 0,600 L 0,350 C 77.69377990430621,389.1578947368421 155.38755980861242,428.3157894736842 261,423 C 366.6124401913876,417.6842105263158 500.1435406698565,367.8947368421052 613,378 C 725.8564593301435,388.1052631578948 818.0382775119616,458.1052631578948 911,516 C 1003.9617224880384,573.8947368421052 1097.7033492822966,619.6842105263158 1186,640 C 1274.2966507177034,660.3157894736842 1357.1483253588517,655.1578947368421 1440,650 L 1440,600 L 0,600 Z');
}
100%{
d: path('M 0,600 L 0,350 C 98.54545454545453,308.6411483253588 197.09090909090907,267.2822966507177 283,292 C 368.90909090909093,316.7177033492823 442.18181818181824,407.5119617224881 542,450 C 641.8181818181818,492.4880382775119 768.1818181818181,486.66985645933016 873,490 C 977.8181818181819,493.33014354066984 1061.0909090909092,505.8086124401914 1152,534 C 1242.9090909090908,562.1913875598086 1341.4545454545455,606.0956937799043 1440,650 L 1440,600 L 0,600 Z');
}
}</style><defs><linearGradient id='gradient' x1='50%' y1='100%' x2='50%' y2='0%'><stop offset='5%' stop-color='#eb144c'></stop><stop offset='95%' stop-color='#9900ef'></stop></linearGradient></defs><path d='M 0,600 L 0,350 C 98.54545454545453,308.6411483253588 197.09090909090907,267.2822966507177 283,292 C 368.90909090909093,316.7177033492823 442.18181818181824,407.5119617224881 542,450 C 641.8181818181818,492.4880382775119 768.1818181818181,486.66985645933016 873,490 C 977.8181818181819,493.33014354066984 1061.0909090909092,505.8086124401914 1152,534 C 1242.9090909090908,562.1913875598086 1341.4545454545455,606.0956937799043 1440,650 L 1440,600 L 0,600 Z' stroke='none' stroke-width='0' fill='url(#gradient)' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-1'></path></svg>"
)
El contenedor Container_contiene deberá estar centrado.
Dentro de Container_contiene deberá estar Container_panel.
Dentro de Container_panel deben estar los label, text y botón.
Para que los campos abarquen todo el ancho del contener puedes utilizar:
Para el efecto difuminado copiaremos y pegaremos el siguiente código en HtmlText dentro de html_efecto.
"<div style='
width: " & Parent.Width - 10 & "px;
height: " & Parent.Height - 15 & "px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.4);'>
</div>"