Como adicionar efeito degradê nas laterais do carrossel de imagem no elementor (via css)

Recentemente fiz um carrossel de imagen no elementor free e coloquei uma animação para ele movimentar automaticamente. Porém o logo ficava cortado quando chegava nas bordas.

Sendo assim pedi para a minha assistente de ia Mônica criar o CSS.

Super simples. Basta colocar uma classe ID (nas opções avançadas do widget) e depois colar o css.

.meu-carrosse {
    position: relative;
    overflow: hidden;
}

.meu-carrosse::before,
.meu-carrosse::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px; /* ajuste conforme necessário */
    pointer-events: none;
    z-index: 2;
}

.meu-carrosse::before {
    left: 0;
    background: linear-gradient(to right, #000 60%, transparent 100%);
}

.meu-carrosse::after {
    right: 0;
    background: linear-gradient(to left, #000 60%, transparent 100%);
}

Note:
no meu widget usei o ID meu.carrosse
se você usar outro, basta renomear dentro do css.
o fundo da minha página é preta, se a sua for branca, é só trocar a cor dentro do CSS.

Caso você não consiga editar o CSS personalizado dentro dessa página, instale o plugin PRO ELEMENTS e seja feliz.

Resultado