CSS3漸變從右到左寬度是一種常見的效果，它可以讓頁面看起來更加美觀而富有層次感。下面我們來一步步了解如何實現這個效果。

/* 設置漸變背景 */
background: linear-gradient(to left, #fcb045, #fd1d1d);
/* 設置寬度 */
width: 200px;
/* 使用偽元素來實現漸變背景的反向效果 */
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 20px;
background: linear-gradient(to left, transparent, #fcb045);
}

首先，我們使用了一個線性漸變來設置背景色，方向為從右到左。這個漸變的起始色是#fcb045，結束色是#fd1d1d，可以根據實際需求自行調整顏色值。

此外，我們還需要設置一個寬度值。這里我們設置了200px，同樣也可以根據具體情況來設置寬度。

最后，我們使用了一個偽元素來實現漸變背景的反向效果。具體來說，我們使用了一個空元素，并將它的位置設置到了左邊界之外，然后將它的寬度設置為20px，并為它設置了一個透明度漸變背景，從透明到#fcb045的漸變色。這樣就實現了一個從右到左的寬度漸變效果。