CSS stop-opacity Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Container sizing */
.example {
    width: 400px;
    max-width: 100%;
}

/* Style the gradient stops via CSS using stop-opacity */
.stop-start {
    stop-color: #ff7f50;    /* coral */
    stop-opacity: 1;         /* fully opaque */
}

.stop-end {
    stop-color: #1e90ff;    /* dodgerblue */
    stop-opacity: 0.25;      /* mostly transparent */
}

/* Optional: make the SVG render as a block and keep sharp edges */
svg {
    display: block;
}

/* Example interactive change: increase end opacity on hover */
.example:hover .stop-end {
    stop-opacity: 0.9;
}</style></head><body><div class='example'>
    <svg width='400' height='150' viewBox='0 0 400 150' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Gradient with stop-opacity set by CSS'>
        <defs>
            <linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'>
                <stop offset='0%' class='stop-start'/>
                <stop offset='100%' class='stop-end'/>
            </linearGradient>
        </defs>

        <rect x='10' y='10' width='380' height='60' fill='url(#grad)' stroke='#000' stroke-width='1'/>
        <rect x='10' y='80' width='180' height='60' fill='url(#grad)' stroke='#000' stroke-width='1'/>
        <circle cx='300' cy='110' r='30' fill='url(#grad)' stroke='#000' stroke-width='1'/>
    </svg>
</div></body></html>