curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
A background gradient in CSS is a smooth transition between two or more colors that can be applied to the background of an element. Gradients allow you to create visually appealing backgrounds without needing images.
There are two main types of gradients in CSS: linear gradients and radial gradients.
A linear gradient transitions colors along a straight line. You can define the direction and the colors involved.
Here is the basic syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
In this example, we are using the background CSS property with a value of the linear gradient.
The direction specifies the direction of the gradient. It can be an angle (such as 45deg), a keyword (such as to right, to bottom), or a side/corner.
color-stop specifies the colors and positions where the gradient transitions occur.
To better understand how linear gradients work, let's take a look at the following example:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="linear-gradient"></div>
.linear-gradient{
background: linear-gradient(to right, red, yellow);
height: 40vh;
}
:::
This CSS creates a linear gradient that transitions from red on the left to yellow on the right. The gradient is applied to an element with a height of 40% of the viewport height. You'll learn more about vh units in a future lesson.
The to right direction means the gradient runs horizontally from left to right.
Another type of gradient would be the radial gradient.
A radial gradient transitions colors radiating from an origin (usually the center) outward in a circular or elliptical shape.
Here is the basic syntax:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...)
On the syntax, the shape specifies the shape of gradient which could be circle or ellipse.
The size determines the size of the gradient's ending shape which could be closest-side, closest-corner, farthest-side or farthest-corner.
position determines the position of the gradient's center which could be specified using keywords (such as center, top left, bottom right) or precise values (such as 50% 50%, 10px 20px).
Lastly, color stops are a list of colors that the gradient transitions through. Each color stop can optionally include a position value (percentage or length) indicating where the color should be placed.
An example would be:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="radial-gradient"></div>
.radial-gradient{
background: radial-gradient(circle closest-side at center, red, yellow 50%, green);
height: 60vh;
}
:::
This CSS creates a circular radial gradient centered in the element. It starts with red at the center, transitions to yellow at 50% of the radius, and ends with green.
The closest-side keyword makes the gradient's ending shape fit the closest side of the element. The gradient is applied to an element with a height of 60% of the viewport height.
Understanding how to work with CSS gradients can significantly enhance your designs by providing visually appealing backgrounds without the need for images.
With options like linear gradients for smooth transitions and radial gradients for circular effects, they offer both flexibility and creativity in web design.
What does the circle keyword specify in a radial-gradient() function?
The gradient will have a square shape.
Consider what shape the gradient will take when using the circle keyword.
The gradient will extend in a diagonal direction.
Consider what shape the gradient will take when using the circle keyword.
The gradient will have a circular shape.
The gradient will be applied to the text.
Consider what shape the gradient will take when using the circle keyword.
3
What does the farthest-corner keyword do in the size parameter of a radial-gradient() function?
It makes the gradient extend to the nearest corner of the element.
Think about how the size of the gradient affects its coverage relative to the element.
It makes the gradient cover the entire element's width.
Think about how the size of the gradient affects its coverage relative to the element.
It makes the gradient extend to the farthest corner of the element.
It makes the gradient only appear within the element's padding.
Think about how the size of the gradient affects its coverage relative to the element.
3
In the radial-gradient(circle at center, red, yellow 50%, green) function, where is the gradient's center located?
At the top right corner of the element.
Consider the placement specified by the at center part of the function.
At the bottom left corner of the element.
Consider the placement specified by the at center part of the function.
At the center of the element.
At the outer edge of the element.
Consider the placement specified by the at center part of the function.
3