CSS In-Depth, v2 CSS In-Depth, v2

Linear & Radial Gradient Syntax

Check out a free preview of the full CSS In-Depth, v2 course:
The "Linear & Radial Gradient Syntax" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Linear and radial gradients go from one color to another. The default direction is "to bottom" which is from top to bottom.

Get Unlimited Access Now

Transcript from the "Linear & Radial Gradient Syntax" Lesson

[00:00:02]
>> Estelle Weyl: So the linear gradient syntax, there were two previous syntaxes. Syntaxses? Syntaxum? I don't know how you pluralize syntax but there were two previous ones. There was the old webkit and the old, old webkit, both prefixed. As I've said a few times, don't get the prefix version because basically will just make the device slow if it still needs to run to the prefix.

[00:00:30] So the syntax now is linear gradient and you either provide it an angle or you say to and the direction that you want it to go. So either to some side or a corner. Like either to top or to top right. And then you can provide it with color stops.

[00:00:49] And even add some color hints. So the few things to remember about linear gradients is if you're using a key term don't forget the word to. And the top, when you're talking about degrees, the top is zero and the angles go clockwise. And that is actually different than the previous syntax.

[00:01:08] So if you see a gradient that is broken, before when we used to do dash webkit, dash moz, dash everything else. And then we would just put the default for when it was supported, we would omit the to keyword because it wasn't necessary back then. And then the angles actually went counterclockwise.

[00:01:28] So generally it doesn't make that much of a difference because gradients usually just go top to bottom. So in this example it goes from rebeccapurple to palegoldenrod. So all it says is linear gradient and it has two color stops rebeccapurple. Comma, palegoldenrod. It's the same as saying to bottom.

[00:01:57] Right? Nothing changed. And then saying 0%. And then saying 100%.
>> Estelle Weyl: There we go. So the default are two bottom. The direction is two bottom. And if you don't actually stay where your color stop is, it puts it up to zero and 100%. We're gonna cover color stops in just a moment.

[00:02:21] Then we have the radial syntax and I'm introducing the radial syntax here just briefly. We're going to deep dive into it after we're done with linear gradients. But I wanna show you just the stuff that's involved so that you know what things are gonna be reused. Radial gradients says shape or size at a position and then you have color stops and color hints.

[00:02:41] So when you learn the color stops and the color hints, just realize they're gonna be used for both of these. But the angle for the to is only used in linear gradients.