Re: [gradients] basics

On Wed, Nov 11, 2009 at 4:40 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Nov 11, 2009, at 2:16 PM, Tab Atkins Jr. wrote:
>
>>> background-image: linear-gradient(-90deg, transparent, transparent 16px,
>>> red
>>> 16px, yellow calc(100% - 32px), transparent calc(100% - 32px),
>>> transparent)
>>> ...instead of
>>> background-size: calc(100% - 32px);
>>> background-image: linear-gradient(-90deg, red, yellow)
>>
>> You don't need to add 4 additional stops, just 2.
>
> How do you figure? I have 2 at the beginning and 2 at the end, otherwise I
> get a soft transition between transparent and my intended start color.

Your intended start and end colors are red and yellow, right?  Then
all you need is linear-gradient(transparent 16px, red 16px, yellow
calc(100% - 32px), transparent calc(100% - 32px)).  That'll force an
immediate transition to transparent before and after the intended
gradient.

~TJ