css styled mui нужно добавить градиент

Question

Нужен прозрачный градиент, Box справа от экрана поверх всего, справа он должен быть белым, а слева он должен быть прозрачным и эта прозрачность должна быть постепенной, как туман))

export const BoxShadowStyled = styled(Box)(({ theme: { spacing } }) => ({
    width: spacing(12),
    height: '100vh',
    position: 'absolute',
    right: 0,
    background: 'linear-gradient(to right bottom,#430089, #82ffa1) 100%',
}));

цвет по идее должен быть один в background только опасити как-то менять от 0 слева до 100 справа

Answer 1

Этого можно добиться с помощью ключевого слова transparent, или задавать цвета с альфа каналом в rgba, регулируя прозрачность, изменяя последнее значение в скобках от 0 до 1. Где 0 значит полностью прозрачный. Процентами задаётся размер влияния-распространения того, или иного цвета в пределах градиента.

body {
  background: blue
}

#grad1 {
  height: 50px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, #82ffa1 50%, #FFFFFF);
}

#grad2 {
  height: 50px;
  background: linear-gradient(to right, transparent 10%, #82ffa1 50%, #FFFFFF);
}

<div id="grad1"></div>
<br>
<div id="grad2"></div>

БЛОГ НА HUSL

css styled mui нужно добавить градиент

Ответы (1 шт):