Efeito de vidro
CSS – Coloque um efeito de vidro em qualquer widget
selector {
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
Card Neon com Brilho
CSS – Faça seu card com neon com efeito de brilho
selector{
--first-color: #5ddcff;
--second-color: #3c67e3;
--third-color: #4e00c2;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.5s ease-in-out;
}
selector:hover::before, selector:hover::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 43%, var(--third-color));
animation: spin 2.5s linear infinite;
opacity: 1;
}
selector:hover::before {
width: 104%;
height: 104%;
border-radius: 8px;
top: -2%;
left: -2%;
}
selector:hover::after {
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(70px);
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
Efeito de Vidro
CSS – Adicone um efeito vidro no Container Elementor
selector {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(40px);
}
Degradê na borda horizontal
CSS
selector:before {
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1px;
border-radius: 15px;
background: linear-gradient(100.11deg, rgba(0, 0, 0, 0) 6.04%, #F3578E 102.75%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
selector {
background: linear-gradient(100.42deg, rgba(83, 83, 83, 0.1) 3.89%, rgba(255, 255, 255, 0) 82.71%);
}
Borda degradê
CSS
selector {
border: 1px solid;
border-image: linear-gradient(137deg, #40D1E8 0%, #0095FF 73.97%) 1;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
}
Controlar Sombra
CSS – Controle a sombra de um elemento no Elementor
selector {
/* Ajuste o offset-x, offset-y, blur-radius e spread-radius para corresponder ao efeito de sombra desejado */box-shadow: 11px 8px 9px 0px rgba(0, 0, 0, 0.3);
}
Clip-Path
CSS – Adicione um efeito clip-path ao elemento no Elementor
selector::before {
content: "";
position: absolute;
border-radius: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
width: calc(100% - 2px);
height: calc(100% - 2px);
z-index: -1;
clip-path: polygon(44.8527px 0.518555px, 0px 125.115px, 0px calc(100% - 0.51800000000003px), calc(100% - 40.78px) calc(100% - 0.51800000000003px), calc(100% - 0px) calc(100% - 113.788px), calc(100% - 0px) 0.518555px, 44.8527px 0.518555px);
}
selector::after {
content: "";
position: absolute;
border-radius: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
width: 100%;
height: 100%;
z-index: -1;
clip-path: polygon(44.8527px 0.518555px, 0px 125.115px, 0px calc(100% - 0.51800000000003px), calc(100% - 40.78px) calc(100% - 0.51800000000003px), calc(100% - 0px) calc(100% - 113.788px), calc(100% - 0px) 0.518555px, 44.8527px 0.518555px);
}
Efeito vidro nos campos do formulário
CSS – Adicione um efeito vidro aos campos do formulário no Elementor
selector .elementor-field {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
Borda degrade arredondada
CSS – Adicione uma borda degradê arredondada a um elemento no Elementor
selector {
z-index: 1;
position: relative; /* Certifica-se de que o seletor tenha um contexto de posição */
}
selector:before {
content: "";
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1px;
background: linear-gradient(93deg, #F00 10.38%, #BD0000 59.7%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
border-radius: 8px;
}
Divisor de seção
CSS – Divisor de seção com clip-path
Cole esse código no Custom CSS da sua seção.
selector {
clip-path: polygon(
/* Ponto 1: (371.209px 60.9747px) -> (19.33% 5.65%) */
19.33380208% 5.64580556%,
/* Ponto 2: (8px 60.9747px) -> (0.41% 5.65%) */
0.41666667% 5.64580556%,
/* Ponto 3: (8px 60.9747px) -> (0.41% 5.65%) */
0.41666667% 5.64580556%,
/* Ponto 4: (3.45825529px 61.341172px) -> (0.18% 5.68%) */
0.18011746% 5.67973815%,
/* Ponto 5: (-0.85016448px 62.402156px) -> (-0.04% 5.78%) */
-0.04427940% 5.77797741%,
/* Ponto 6: (-4.86761077px 64.100004px) -> (-0.25% 5.94%) */
-0.25352139% 5.93518556%,
/* Ponto 7: (-8.53643504px 66.377068px) -> (-0.44% 6.15%) */
-0.44460005% 6.14602481%,
/* Ponto 8: (-11.79898875px 69.1757px) -> (-0.61% 6.40%) */
-0.61453066% 6.40515741%,
/* Ponto 9: (-14.59762336px 72.438252px) -> (-0.76% 6.71%) */
-0.76029392% 6.70724556%,
/* Ponto 10: (-16.87469033px 76.107076px) -> (-0.88% 7.05%) */
-0.87889012% 7.04695148%,
/* Ponto 11: (-18.57254112px 80.124524px) -> (-0.97% 7.42%) */
-0.96731985% 7.41893741%,
/* Ponto 12: (-19.63352719px 84.432948px) -> (-1.02% 7.82%) */
-1.02257746% 7.81786556%,
/* Ponto 13: (-20px 88.9747px) -> (-1.04% 8.24%) */
-1.04166667% 8.23839815%,
/* Ponto 14: (-20px calc(100% - 89.16px)) -> (-1.04% calc(100% - 8.26%)) */
-1.04166667% calc(100% - 8.25555556%),
/* Ponto 15: (-20px calc(100% - 89.16px)) -> (-1.04% calc(100% - 8.26%)) */
-1.04166667% calc(100% - 8.25555556%),
/* Ponto 16: (-19.63352719px calc(100% - 84.61922px)) -> (-1.02% calc(100% - 7.83%)) */
-1.02257746% calc(100% - 7.83511111%),
/* Ponto 17: (-18.57254112px calc(100% - 80.31136px)) -> (-0.97% calc(100% - 7.44%)) */
-0.96731985% calc(100% - 7.43625926%),
/* Ponto 18: (-16.87469033px calc(100% - 76.29414px)) -> (-0.88% calc(100% - 7.06%)) */
-0.87889012% calc(100% - 7.06427778%),
/* Ponto 19: (-14.59762336px calc(100% - 72.62528px)) -> (-0.76% calc(100% - 6.72%)) */
-0.76029392% calc(100% - 6.72456481%),
/* Ponto 20: (-11.79898875px calc(100% - 69.3625px)) -> (-0.61% calc(100% - 6.42%)) */
-0.61453066% calc(100% - 6.42249999%),
/* Ponto 21: (-8.53643504px calc(100% - 66.56352px)) -> (-0.44% calc(100% - 6.16%)) */
-0.44460005% calc(100% - 6.16328699%),
/* Ponto 22: (-4.86761077px calc(100% - 64.28606px)) -> (-0.25% calc(100% - 5.95%)) */
-0.25352139% calc(100% - 5.95241477%),
/* Ponto 23: (-0.85016448px calc(100% - 62.58784px)) -> (-0.04% calc(100% - 5.79%)) */
-0.04427940% calc(100% - 5.79517037%),
/* Ponto 24: (3.45825529px calc(100% - 61.52658px)) -> (0.18% calc(100% - 5.70%)) */
0.18011746% calc(100% - 5.69699815%),
/* Ponto 25: (8px calc(100% - 61.16px)) -> (0.41% calc(100% - 5.66%)) */
0.41666667% calc(100% - 5.66296296%),
/* Ponto 26: (371.209px calc(100% - 61.16px)) -> (19.33% calc(100% - 5.66%)) */
19.33380208% calc(100% - 5.66296296%),
/* Ponto 27: (371.209px calc(100% - 61.16px)) -> (19.33% calc(100% - 5.66%)) */
19.33380208% calc(100% - 5.66296296%),
/* Ponto 28: (373.050314px calc(100% - 61.09942px)) -> (19.42% calc(100% - 5.66%)) */
19.42970385% calc(100% - 5.6573537%),
/* Ponto 29: (374.875752px calc(100% - 60.91896px)) -> (19.52% calc(100% - 5.64%) ) */
19.52477875% calc(100% - 5.64064444%),
/* Ponto 30: (376.679758px calc(100% - 60.62054px)) -> (19.61% calc(100% - 5.61%)) */
19.61040406% calc(100% - 5.61292037%),
/* Ponto 31: (378.456776px calc(100% - 60.20608px)) -> (19.71% calc(100% - 5.57%)) */
19.71129042% calc(100% - 5.57463704%),
/* Ponto 32: (380.20125px calc(100% - 59.6775px)) -> (19.80% calc(100% - 5.52%)) */
19.80214844% calc(100% - 5.52569444%),
/* Ponto 33: (381.907624px calc(100% - 59.03672px)) -> (19.89% calc(100% - 5.47%)) */
19.89008458% calc(100% - 5.46636296%),
/* Ponto 34: (383.570342px calc(100% - 58.28566px)) -> (19.98% calc(100% - 5.39%)) */
19.97762198% calc(100% - 5.39682778%),
/* Ponto 35: (385.183848px calc(100% - 57.42624px)) -> (20.06% calc(100% - 5.32%)) */
20.06165875% calc(100% - 5.31724074%),
/* Ponto 36: (386.742586px calc(100% - 56.46038px)) -> (20.14% calc(100% - 5.23%)) */
20.14284302% calc(100% - 5.22781296%),
/* Ponto 37: (388.241px calc(100% - 55.39px)) -> (20.22% calc(100% - 5.13%)) */
20.22088542% calc(100% - 5.1287037%),
/* Ponto 38: (452.733px calc(100% - 5.96px)) -> (23.58% calc(100% - 0.55%)) */
23.57984375% calc(100% - 0.55185185%),
/* Ponto 39: (452.733px calc(100% - 5.96px)) -> (23.58% calc(100% - 0.55%)) */
23.57984375% calc(100% - 0.55185185%),
/* Ponto 40: (454.231171px calc(100% - 4.8896199999999px)) -> (23.66% calc(100% - 0.45%)) */
23.65787349% calc(100% - 0.45274259%),
/* Ponto 41: (455.789768px calc(100% - 3.9237599999997px)) -> (23.74% calc(100% - 0.36%)) */
23.73905042% calc(100% - 0.36331111%),
/* Ponto 42: (457.403217px calc(100% - 3.0643399999999px)) -> (23.82% calc(100% - 0.28%)) */
23.82300089% calc(100% - 0.28373519%),
/* Ponto 43: (459.065944px calc(100% - 2.3132799999998px)) -> (23.91% calc(100% - 0.21%)) */
23.90937208% calc(100% - 0.21419259%),
/* Ponto 44: (460.772375px calc(100% - 1.6724999999999px)) -> (23.99% calc(100% - 0.15%)) */
23.99856953% calc(100% - 0.15486111%),
/* Ponto 45: (462.516936px calc(100% - 1.14392px)) -> (24.09% calc(100% - 0.10%)) */
24.08942375% calc(100% - 0.10591852%),
/* Ponto 46: (464.294053px calc(100% - 0.72946000000002px)) -> (24.18% calc(100% - 0.06%)) */
24.18198193% calc(100% - 0.06754259%),
/* Ponto 47: (466.098152px calc(100% - 0.43103999999994px)) -> (24.27% calc(100% - 0.04%)) */
24.27594542% calc(100% - 0.03991111%),
/* Ponto 48: (467.923659px calc(100% - 0.2505799999999px)) -> (24.37% calc(100% - 0.02%)) */
24.36894057% calc(100% - 0.02319999%),
/* Ponto 49: (469.765px calc(100% - 0.19000000000005px)) -> (24.47% calc(100% - 0.01%)) */
24.46692708% calc(100% - 0.01759259%),
/* Ponto 50: (calc(100% - 469.76px) calc(100% - 0.19000000000005px)) -> (calc(100% - 24.47%) calc(100% - 0.01%)) */
calc(100% - 24.46666667%) calc(100% - 0.01759259%),
/* Ponto 51: (calc(100% - 469.76px) calc(100% - 0.19000000000005px)) -> (calc(100% - 24.47%) calc(100% - 0.01%)) */
calc(100% - 24.46666667%) calc(100% - 0.01759259%),
/* Ponto 52: (calc(100% - 467.92074px) calc(100% - 0.2505799999999px)) -> (calc(100% - 24.37%) calc(100% - 0.02%)) */
calc(100% - 24.37087125%) calc(100% - 0.02319999%),
/* Ponto 53: (calc(100% - 466.09672px) calc(100% - 0.43103999999971px)) -> (calc(100% - 24.27%) calc(100% - 0.04%)) */
calc(100% - 24.27587083%) calc(100% - 0.03991111%),
/* Ponto 54: (calc(100% - 464.29358px) calc(100% - 0.72946000000024px)) -> (calc(100% - 24.18%) calc(100% - 0.06%)) */
calc(100% - 24.18195729%) calc(100% - 0.06754259%),
/* Ponto 55: (calc(100% - 462.51696px) calc(100% - 1.14392px)) -> (calc(100% - 24.09%) calc(100% - 0.10%)) */
calc(100% - 24.089425%) calc(100% - 0.10591852%),
/* Ponto 56: (calc(100% - 460.7725px) calc(100% - 1.6725000000001px)) -> (calc(100% - 23.99%) calc(100% - 0.15%)) */
calc(100% - 23.99856953%) calc(100% - 0.15486111%),
/* Ponto 57: (calc(100% - 459.06584px) calc(100% - 2.3132800000001px)) -> (calc(100% - 23.91%) calc(100% - 0.21%)) */
calc(100% - 23.90936667%) calc(100% - 0.21419259%),
/* Ponto 58: (calc(100% - 457.40262px) calc(100% - 3.0643399999999px)) -> (calc(100% - 23.82%) calc(100% - 0.28%)) */
calc(100% - 23.82305313%) calc(100% - 0.28373519%),
/* Ponto 59: (calc(100% - 455.78848px) calc(100% - 3.9237600000001px)) -> (calc(100% - 23.74%) calc(100% - 0.36%)) */
calc(100% - 23.73898333%) calc(100% - 0.36331111%),
/* Ponto 60: (calc(100% - 454.22906px) calc(100% - 4.8896199999999px)) -> (calc(100% - 23.66%) calc(100% - 0.45%)) */
calc(100% - 23.65776354%) calc(100% - 0.45274259%),
/* Ponto 61: (calc(100% - 452.73px) calc(100% - 5.96px)) -> (calc(100% - 23.58%) calc(100% - 0.55%)) */
calc(100% - 23.5796875%) calc(100% - 0.55185185%),
/* Ponto 62: (calc(100% - 388.24px) calc(100% - 55.39px)) -> (calc(100% - 20.22%) calc(100% - 5.13%)) */
calc(100% - 20.22083333%) calc(100% - 5.1287037%),
/* Ponto 63: (calc(100% - 388.24px) calc(100% - 55.39px)) -> (calc(100% - 20.22%) calc(100% - 5.13%)) */
calc(100% - 20.22083333%) calc(100% - 5.1287037%),
/* Ponto 64: (calc(100% - 386.74121px) calc(100% - 56.46038px)) -> (calc(100% - 20.14%) calc(100% - 5.23%)) */
calc(100% - 20.14277135%) calc(100% - 5.22781296%),
/* Ponto 65: (calc(100% - 385.18248px) calc(100% - 57.42624px)) -> (calc(100% - 20.06%) calc(100% - 5.32%)) */
calc(100% - 20.0615875%) calc(100% - 5.31724074%),
/* Ponto 66: (calc(100% - 383.56927px) calc(100% - 58.28566px)) -> (calc(100% - 19.98%) calc(100% - 5.40%)) */
calc(100% - 19.97756615%) calc(100% - 5.39682778%),
/* Ponto 67: (calc(100% - 381.90704px) calc(100% - 59.03672px)) -> (calc(100% - 19.89%) calc(100% - 5.47%)) */
calc(100% - 19.89005417%) calc(100% - 5.46636296%),
/* Ponto 68: (calc(100% - 380.20125px) calc(100% - 59.6775px)) -> (calc(100% - 19.80%) calc(100% - 5.53%)) */
calc(100% - 19.80214844%) calc(100% - 5.52569444%),
/* Ponto 69: (calc(100% - 378.45736px) calc(100% - 60.20608px)) -> (calc(100% - 19.71%) calc(100% - 5.57%)) */
calc(100% - 19.71132083%) calc(100% - 5.57463704%),
/* Ponto 70: (calc(100% - 376.68083px) calc(100% - 60.62054px)) -> (calc(100% - 19.62%) calc(100% - 5.61%)) */
calc(100% - 19.61879688%) calc(100% - 5.61292037%),
/* Ponto 71: (calc(100% - 374.87712px) calc(100% - 60.91896px)) -> (calc(100% - 19.52%) calc(100% - 5.64%)) */
calc(100% - 19.52485938%) calc(100% - 5.64064444%),
/* Ponto 72: (calc(100% - 373.05169px) calc(100% - 61.09942px)) -> (calc(100% - 19.43%) calc(100% - 5.66%)) */
calc(100% - 19.42977552%) calc(100% - 5.6573537%),
/* Ponto 73: (calc(100% - 371.21px) calc(100% - 61.16px)) -> (calc(100% - 19.33%) calc(100% - 5.66%)) */
calc(100% - 19.33385417%) calc(100% - 5.66296296%),
/* Ponto 74: (calc(100% - 8px) calc(100% - 61.16px)) -> (calc(100% - 0.42%) calc(100% - 5.66%)) */
calc(100% - 0.41666667%) calc(100% - 5.66296296%),
/* Ponto 75: (calc(100% - 8px) calc(100% - 61.16px)) -> (calc(100% - 0.42%) calc(100% - 5.66%)) */
calc(100% - 0.41666667%) calc(100% - 5.66296296%),
/* Ponto 76: (calc(100% - 3.4592199999995px) calc(100% - 61.52658px)) -> (calc(100% - 0.18%) calc(100% - 5.70%)) */
calc(100% - 0.18016771%) calc(100% - 5.69699815%),
/* Ponto 77: (calc(100% - -0.84864000000039px) calc(100% - 62.58784px)) -> (calc(100% - -0.04%) calc(100% - 5.79%)) */
calc(100% - -0.04419999%) calc(100% - 5.79517037%),
/* Ponto 78: (calc(100% - -4.8658600000001px) calc(100% - 64.28606px)) -> (calc(100% - -0.25%) calc(100% - 5.95%)) */
calc(100% - -0.25343021%) calc(100% - 5.95241477%),
/* Ponto 79: (calc(100% - -8.5347200000003px) calc(100% - 66.56352px)) -> (calc(100% - -0.44%) calc(100% - 6.16%)) */
calc(100% - -0.44451042%) calc(100% - 6.16328699%),
/* Ponto 80: (calc(100% - -11.7975px) calc(100% - 69.3625px)) -> (calc(100% - -0.61%) calc(100% - 6.42%)) */
calc(100% - -0.61445313%) calc(100% - 6.42249999%),
/* Ponto 81: (calc(100% - -14.59648px) calc(100% - 72.62528px)) -> (calc(100% - -0.76%) calc(100% - 6.72%)) */
calc(100% - -0.76023333%) calc(100% - 6.72456481%),
/* Ponto 82: (calc(100% - -16.87394px) calc(100% - 76.29414px)) -> (calc(100% - -0.88%) calc(100% - 7.06%)) */
calc(100% - -0.87885104%) calc(100% - 7.06427778%),
/* Ponto 83: (calc(100% - -18.57216px) calc(100% - 80.31136px)) -> (calc(100% - -0.97%) calc(100% - 7.44%)) */
calc(100% - -0.96730000%) calc(100% - 7.43625926%),
/* Ponto 84: (calc(100% - -19.63342px) calc(100% - 84.61922px)) -> (calc(100% - -1.02%) calc(100% - 7.83%)) */
calc(100% - -1.02257300%) calc(100% - 7.83511111%),
/* Ponto 85: (calc(100% - -20px) calc(100% - 89.16px)) -> (calc(100% - -1.04%) calc(100% - 8.26%)) */
calc(100% - -1.04166667%) calc(100% - 8.25555556%),
/* Ponto 86: (calc(100% - -20px) 88.9747px) -> (calc(100% - -1.04%) 8.24%) */
calc(100% - -1.04166667%) 8.23839815%,
/* Ponto 87: (calc(100% - -20px) 88.9747px) -> (calc(100% - -1.04%) 8.24%) */
calc(100% - -1.04166667%) 8.23839815%,
/* Ponto 88: (calc(100% - -19.63342px) 84.432948px) -> (calc(100% - -1.02%) 7.82%) */
calc(100% - -1.02257300%) 7.81786556%,
/* Ponto 89: (calc(100% - -18.57216px) 80.124524px) -> (calc(100% - -0.97%) 7.42%) */
calc(100% - -0.96730000%) 7.41893741%,
/* Ponto 90: (calc(100% - -16.87394px) 76.107076px) -> (calc(100% - -0.88%) 7.05%) */
calc(100% - -0.87885104%) 7.04695148%,
/* Ponto 91: (calc(100% - -14.59648px) 72.438252px) -> (calc(100% - -0.76%) 6.71%) */
calc(100% - -0.76023333%) 6.70724556%,
/* Ponto 92: (calc(100% - -11.7975px) 69.1757px) -> (calc(100% - -0.61%) 6.41%) */
calc(100% - -0.61445313%) 6.40515741%,
/* Ponto 93: (calc(100% - -8.5347200000001px) 66.377068px) -> (calc(100% - -0.44%) 6.15%) */
calc(100% - -0.44451042%) 6.14602481%,
/* Ponto 94: (calc(100% - -4.8658599999999px) 64.100004px) -> (calc(100% - -0.25%) 5.94%) */
calc(100% - -0.25343021%) 5.93518556%,
/* Ponto 95: (calc(100% - -0.84863999999993px) 62.402156px) -> (calc(100% - -0.04%) 5.78%) */
calc(100% - -0.04419999%) 5.77797741%,
/* Ponto 96: (calc(100% - 3.4592200000002px) 61.341172px) -> (calc(100% - 0.18%) 5.68%) */
calc(100% - 0.18016771%) 5.67973815%,
/* Ponto 97: (calc(100% - 8px) 60.9747px) -> (calc(100% - 0.42%) 5.65%) */
calc(100% - 0.41666667%) 5.64580556%,
/* Ponto 98: (calc(100% - 371.21px) 60.9747px) -> (calc(100% - 19.33%) 5.65%) */
calc(100% - 19.33385417%) 5.64580556%,
/* Ponto 99: (calc(100% - 371.21px) 60.9747px) -> (calc(100% - 19.33%) 5.65%) */
calc(100% - 19.33385417%) 5.64580556%,
/* Ponto 100: (calc(100% - 373.05169px) 60.9141143px) -> (calc(100% - 19.43%) 5.64%) */
calc(100% - 19.42977552%) 5.63999206%,
/* Ponto 101: (calc(100% - 374.87712px) 60.7336144px) -> (calc(100% - 19.52%) 5.62%) */
calc(100% - 19.52485938%) 5.62348281%,
/* Ponto 102: (calc(100% - 376.68083px) 60.4350861px) -> (calc(100% - 19.62%) 5.59%) */
calc(100% - 19.61879688%) 5.59584131%,
/* Ponto 103: (calc(100% - 378.45736px) 60.0204152px) -> (calc(100% - 19.71%) 5.56%) */
calc(100% - 19.71132083%) 5.55744585%,
/* Ponto 104: (calc(100% - 380.20125px) 59.4914875px) -> (calc(100% - 19.80%) 5.51%) */
calc(100% - 19.80214844%) 5.50847106%,
/* Ponto 105: (calc(100% - 381.90704px) 58.8501888px) -> (calc(100% - 19.89%) 5.45%) */
calc(100% - 19.89005417%) 5.44909156%,
/* Ponto 106: (calc(100% - 383.56927px) 58.0984049px) -> (calc(100% - 19.98%) 5.38%) */
calc(100% - 19.97756615%) 5.37948194%,
/* Ponto 107: (calc(100% - 385.18248px) 57.2380216px) -> (calc(100% - 20.06%) 5.30%) */
calc(100% - 20.0615875%) 5.29981681%,
/* Ponto 108: (calc(100% - 386.74121px) 56.2709247px) -> (calc(100% - 20.14%) 5.21%) */
calc(100% - 20.14277135%) 5.20934488%,
/* Ponto 109: (calc(100% - 388.24px) 55.199px) -> (calc(100% - 20.22%) 5.11%) */
calc(100% - 20.22083333%) 5.11101852%,
/* Ponto 110: (calc(100% - 452.73px) 5.77565px) -> (calc(100% - 23.58%) 0.53%) */
calc(100% - 23.5796875%) 0.53478796%,
/* Ponto 111: (calc(100% - 452.73px) 5.77565px) -> (calc(100% - 23.58%) 0.53%) */
calc(100% - 23.5796875%) 0.53478796%,
/* Ponto 112: (calc(100% - 454.22906px) 4.70373399px) -> (calc(100% - 23.66%) 0.44%) */
calc(100% - 23.65776354%) 0.43553092%,
/* Ponto 113: (calc(100% - 455.78848px) 3.73664512px) -> (calc(100% - 23.74%) 0.35%) */
calc(100% - 23.73898333%) 0.34600418%,
/* Ponto 114: (calc(100% - 457.40262px) 2.87626913px) -> (calc(100% - 23.82%) 0.27%) */
calc(100% - 23.82305313%) 0.26632122%,
/* Ponto 115: (calc(100% - 459.06584px) 2.12449176px) -> (calc(100% - 23.91%) 0.20%) */
calc(100% - 23.90936667%) 0.19671220%,
/* Ponto 116: (calc(100% - 460.7725px) 1.48319875px) -> (calc(100% - 23.99%) 0.14%) */
calc(100% - 23.99856953%) 0.13733322%,
/* Ponto 117: (calc(100% - 462.51696px) 0.95427584px) -> (calc(100% - 24.09%) 0.09%) */
calc(100% - 24.089425%) 0.08835887%,
/* Ponto 118: (calc(100% - 464.29358px) 0.53960877px) -> (calc(100% - 24.18%) 0.05%) */
calc(100% - 24.18195729%) 0.04996378%,
/* Ponto 119: (calc(100% - 466.09672px) 0.24108328px) -> (calc(100% - 24.27%) 0.02%) */
calc(100% - 24.27587083%) 0.02232253%,
/* Ponto 120: (calc(100% - 467.92074px) 0.06058511px) -> (calc(100% - 24.37%) 0.01%) */
calc(100% - 24.37087125%) 0.00561009%,
/* Ponto 121: (calc(100% - 469.76px) 7.5064305955338E-32px) -> (calc(100% - 24.47%) 0.00%) */
calc(100% - 24.46666667%) 0%,
/* Ponto 122: (469.765px 0px) -> (24.47% 0%) */
24.46692708% 0%,
/* Ponto 123: (469.765px 0px) -> (24.47% 0%) */
24.46692708% 0%,
/* Ponto 124: (467.923659px 0.06058511px) -> (24.37% 0.01%) */
24.36894057% 0.00561009%,
/* Ponto 125: (466.098152px 0.24108328px) -> (24.27% 0.02%) */
24.27594542% 0.02232253%,
/* Ponto 126: (464.294053px 0.53960877px) -> (24.18% 0.05%) */
24.18198193% 0.04996378%,
/* Ponto 127: (462.516936px 0.95427584px) -> (24.09% 0.09%) */
24.08942375% 0.08835887%,
/* Ponto 128: (460.772375px 1.48319875px) -> (23.99% 0.14%) */
23.99856953% 0.13733322%,
/* Ponto 129: (459.065944px 2.12449176px) -> (23.91% 0.20%) */
23.90937208% 0.19671220%,
/* Ponto 130: (457.403217px 2.87626913px) -> (23.82% 0.27%) */
23.82300089% 0.26632122%,
/* Ponto 131: (455.789768px 3.73664512px) -> (23.74% 0.35%) */
23.73905042% 0.34600418%,
/* Ponto 132: (454.231171px 4.70373399px) -> (23.66% 0.44%) */
23.65787349% 0.43553092%,
/* Ponto 133: (452.733px 5.77565px) -> (23.58% 0.53%) */
23.57984375% 0.53478796%,
/* Ponto 134: (388.241px 55.199px) -> (20.22% 5.11%) */
20.22088542% 5.11101852%,
/* Ponto 135: (388.241px 55.199px) -> (20.22% 5.11%) */
20.22088542% 5.11101852%,
/* Ponto 136: (386.742586px 56.2709247px) -> (20.14% 5.21%) */
20.14284302% 5.20934488%,
/* Ponto 137: (385.183848px 57.42624px) -> (20.06% 5.32%) */
20.06165875% 5.31724074%,
/* Ponto 138: (383.570342px 58.0984049px) -> (19.98% 5.38%) */
19.97762198% 5.37948194%,
/* Ponto 139: (381.907624px 58.8501888px) -> (19.89% 5.45%) */
19.89008458% 5.44909156%,
/* Ponto 140: (380.20125px 59.4914875px) -> (19.80% 5.51%) */
19.80214844% 5.50847106%,
/* Ponto 141: (378.456776px 60.0204152px) -> (19.71% 5.56%) */
19.71129042% 5.55744585%,
/* Ponto 142: (376.679758px 60.4350861px) -> (19.61% 5.59%) */
19.61040406% 5.59584131%,
/* Ponto 143: (374.875752px 60.7336144px) -> (19.52% 5.62%) */
19.52477875% 5.62348281%,
/* Ponto 144: (373.050314px 60.9141143px) -> (19.42% 5.64%) */
19.42970385% 5.63999206%,
/* Ponto 145: (371.209px 60.9747px) -> (19.33% 5.65%) */
19.33380208% 5.64580556%
);
}
Barra de progresso degradê
CSS – Cole o código no Custom CSS da barra de progresso.
.elementor-progress-bar {
background-image: linear-gradient(90deg, #B3FE03 0%, #E5FFA8 100%);
}
Ruído Animado
HTML – Efeito de ruído animado utilizando GIF
Cole o código em um widget de HTML
<div class = ruido></div>
<style>
.ruido {
display: block;
width: 100vw;
height: 100vh;
opacity: 0.2; /*Ajuste a quantidade aqui*/
background-image: url('https://rtl4013zxp.easybuilder.com.br/wp-content/uploads/2025/06/ruido-animado.gif');
overflow: hidden;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 50;
mix-blend-mode: plus-lighter;
}
</style>
Ruído Animado
HTML – Efeito de ruído animado utilizando GIF
Cole o código em um widget de HTML
<div class = ruido></div>
<style>
.ruido {
display: block;
width: 100vw;
height: 100vh;
opacity: 0.2; /*Ajuste a quantidade aqui*/
background-image: url('https://rtl4013zxp.easybuilder.com.br/wp-content/uploads/2025/06/ruido-animado.gif');
overflow: hidden;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 50;
mix-blend-mode: plus-lighter;
}
</style>
Barra brilhante
HTML – Barra brilhante com efeito de luz
Cole no Custom CSS do seu elemento e defina a classe “efeitobrilho” na aba “Avançados”
.efeitobrilho::after {
content: '';
position: absolute;
top: 0;
left: 8%;
width: 151px;
height: 8px;
background: linear-gradient(98deg, #b2fe02 -5.25%, #d5ff74 93.97%);
box-shadow: 0px 100px 80px 0px rgba(178, 254, 2, 0.31),
0px 41.778px 33.422px 0px rgba(178, 254, 2, 0.22),
0px 22.336px 17.869px 0px rgba(178, 254, 2, 0.18),
0px 12.522px 10.017px 0px rgba(178, 254, 2, 0.16),
0px 6.65px 5.32px 0px rgba(178, 254, 2, 0.13),
0px 2.767px 2.214px 0px rgba(178, 254, 2, 0.09);
}
Card mudando de cor no hover
HTML – Efeito hover que altera cor do card e dos textos
Cole o código no Custom CSS do widget “image box”
/* Garante que os elementos internos (imagem, descrição e título) fiquem acima do fundo */
.elementor-image-box-img,
.elementor-image-box-description,
.elementor-image-box-title {
z-index: 2;
position: relative;
}
/* Estiliza o contêiner principal (card) com fundo verde limão sólido e bordas arredondadas */
.elementor-image-box-wrapper {
background: linear-gradient(280deg, #BFFF2A, #BFFF2A); /* gradiente com a mesma cor para efeito sólido */
border-radius: 12px;
padding: 80px 30px;
transition: 1.5s ease-out; /* transição suave em interações */
z-index: 1;
}
/* Cria uma camada branca invisível por cima do card que aparece no hover */
.elementor-image-box-wrapper::before {
content: "";
background-color: #ffffff; /* fundo branco */
border-radius: 5px;
bottom: 1px;
left: 1px;
opacity: 0; /* invisível por padrão */
position: absolute;
right: 1px;
top: 1px;
transition: opacity 0.5s ease-in-out; /* transição suave da opacidade */
z-index: 1; /* fica abaixo do conteúdo */
}
/* Exibe a camada branca ao passar o mouse sobre o card */
.elementor-image-box-wrapper:hover::before {
opacity: 1;
}
/* Altera a cor do texto da descrição para preto no hover (para melhor contraste com o fundo branco) */
.elementor-image-box-wrapper:hover .elementor-image-box-description {
color: black !important;
}
/* Altera a cor do texto do título para preto no hover */
.elementor-image-box-wrapper:hover .elementor-image-box-title {
color: black !important;
}
Fade inferior na página inteira
HTML + CSS – Fade inferior sobreposto em toda página
<div class="easybuilder"></div>
selector{width:110vw !important; height:110vh !important; position:fixed; left:50% ; background:linear-gradient(0deg, #000 12%, transparent 38%); z-index:98; pointer-events:none; user-select:none; transform:translateX(-50%); bottom:-15% !important;}
Textura de pontos em toda página
HTML + CSS – Textura de pontos sobreposta em toda página
Cole no CSS Geral da sua página.
html::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(at 20% 80%, #fff 1px, transparent 0px);
background-size: 3px 3px;
pointer-events: none;
z-index: 999;
opacity: 0.10;
mix-blend-mode: plus-lighter;
user-select: none;
pointer-events: none;
}