CSS3 introduced to the create background gradients using CSS, removing the need for image files in many cases. Gradients are smooth transitions between two or more specified colors, and you can define intermediate color values called color stops, each with a color and a position. There are three main types of CSS3 background gradients: linear, radial, and repeating.
Linear gradient background css
Linear gradients display colors transitioning across a straight line. By default, a linear gradient starts from the top and fades to the bottom.
Syntax: The basic syntax for a linear gradient using the modern W3C specification is:
background-image: linear-gradient ([direction or angle], color-stop1, color-stop2, … );
- Direction or Angle: Specify the direction of the gradient. This can be a keyword like to top, to bottom, to right, to left, or a combination like to top right. Alternatively, you can use an angle in degrees (deg), grads (grad), rads (rad), or turns (turn). 0deg points upwards, and the angle rotates clockwise. If no direction is set, it defaults to to bottom (from top to bottom). The gradient will always begin in the opposite direction to where you are sending it.
- For example, linear-gradient(to left, red, blue) will create a gradient starting from the right and transitioning from red to blue. linear-gradient(270deg, red, blue) achieves the same result.
- You can create diagonal gradients by declaring both a horizontal and vertical starting position, like linear-gradient(to left top, red, yellow 10%).
- Color Stops: These define the colors in the gradient and the point at which they stop or start. Color stops are comma-separated and consist of a color value (keyword, hex, RGB(A), or HSL(A)) and an optional position (percentage or length). If a position isn’t specified for the first color, it defaults to 0%, and for the last color, it defaults to 100%.
- For example, linear-gradient(red, blue) has two color stops: red at the beginning and blue at the end.
- You can have multiple color stops: linear-gradient(90deg, red 40%, white 40%, white 60%, blue 60%) creates a gradient that appears as stripes because the colors don’t fade but stop and start abruptly at the same position.
Example:
.linear-gradient {
background: linear-gradient(
#f90 0,
#f90 2%,
#555 2%,
#eee 50%,
#555 98%,
#f90 98%,
#f90 100%
);
}In this example, even though no direction is specified, the default top-to-bottom direction applies.
Radial-gradient CSS
Radial gradients start from a central point and spread out smoothly in an elliptical or circular shape.
Syntax: The basic syntax for a radial gradient is:
background-image: radial-gradient( [shape size] [at position], color-stop1, color-stop2, … );
- Shape and Size: You can define the shape (circle or ellipse, with ellipse being the default) and size of the gradient. Size can be specified using keywords or length/percentage values.
- Size Keywords:
- closest-side: The gradient extends to meet the closest side(s) of the box.
- farthest-side: The gradient extends to meet the farthest side(s) of the box.
- closest-corner: The gradient extends to meet the closest corner of the box.
- farthest-corner: The gradient extends to meet the farthest corner of the box (equivalent to cover).
- cover: Identical to farthest-corner.
- contain: Identical to closest side.
- You can also specify a specific size using length units (e.g., 12rem circle). By default, radial gradients have an elliptical shape. To force a circular gradient, use the circle modifier.
- Size Keywords:
- Position: The at keyword allows you to set the center of the gradient, similar to background-position. You can use keywords like center, top left, or pixel/percentage values (e.g., at 75% 60%, at 30px 30px). If omitted, the center defaults to center.
- Color Stops: Similar to linear gradients, you define the colors and their positions in the gradient.
Examples:
A simple radial gradient:
.radial-gradient-simple {
background: radial-gradient(red, blue);
}This starts red from the center and transitions to blue at the edges.
A circular gradient starting at the bottom:
.radial-gradient {
background: radial-gradient(circle at bottom, yellow, orange, red);
}This creates a “sunrise” effect.
A radial gradient with a specific size and position:
.radial-gradient-positioned {
background: radial-gradient(closest-side circle at center, #333, blue);
}This circular gradient starts at the center and extends to the closest side.
Repeating Gradients CSS
CSS also allows for the creation of repeating background gradients, both linear and radial. These functions take the same arguments as their non-repeating counterparts but tile the gradient across the background of the element.
Syntax: To create a repeating gradient, you simply prefix linear-gradient() or radial-gradient() with repeating-:
background-image: repeating-linear-gradient ([direction or angle], color-stop1, color-stop2, … );
background-image: repeating-radial-gradient ([shape size] [at position], color-stop1, color-stop2, … );
The repetition occurs based on the distances defined by the color stops.
Examples:
Repeating linear gradient:
.repeating-linear-gradient {
background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}This creates angled stripes of yellow and black.
Repeating radial gradient:
.repeating-radial-gradient {
background: repeating-radial-gradient(black 0px, orange 5px, red 10px);
}This creates concentric rings of black, orange, and red. The gradient repeats every 10px in this case.
Gradients are set using the background-image property or the background shorthand. Be aware that if you set a solid color background using the background shorthand after setting a gradient with background-image, the solid color will override the gradient.
CSS gradients are a powerful tool for creating visual effects directly in the browser, reducing the need for images and offering flexibility and responsiveness. Online gradient generators like Colorzilla can be helpful for creating complex gradients and obtaining the necessary CSS code.
CSS3 Topics