Gradients and Mask Layers
CSS Gradients and effects
The Linear-gradient() function creates a smooth color transition as a background-image, which can include a starting point, direction, and angle.
background: linear-gradient( <Direction>, color1, color2, etc...);Guide to linear-gradients()
We use Degrees as starting point:
//by default is 0deg horizontal top-bottom
.nel div:nth-child(1){
width: 120px;
height: 120px;
background: linear-gradient(yellow, blue);
}If we use keywords it's the to ending point:
.nel div:nth-child(2){
width: 120px;
height: 120px;
background: linear-gradient(to right bottom , yellow, blue, pink );
}We can also use background-image and transparent gradients;
//Transparent on blue background
.nel div:nth-child(4) {
width: 120px;
height: 120px;
background-image:
linear-gradient(110deg,
yellow,
transparent 15%,
pink 40%);
background-color: blue;
}We can use % or px for color-stops on the gradient:
//we set where the color will change
.nel div:nth-child(4) {
width: 120px;
height: 120px;
background-image:
linear-gradient(110deg,
yellow,
transparent 15%,
pink 40%);
background-color: blue;
}if we want rigid color transition we can:
//repeated to avoid blue gradient
.nel div:nth-child(5) {
width: 120px;
height: 120px;
background-image:
linear-gradient(90deg,
orange 30px,
blue 30px,
blue 70px,
orange 70px);
}
A radial-gradient() function radiates from the center, on an ellipse(default) or circle shape:
Radial gradient guide
We can change the gradient's ending areas with:
We set the starting point for the radial:
And use rigid gradients:
A conic-gradient is a circular gradient that rotates on a center point
Conic-gradient guide
We can set AT its center (with both % and px):
We can also set FROM which degree they start and color stops(only in deg and %)
We can add repeating- for all of the gradients.
Repeatng gradient lines
To have repeating gradients we need to set an ending point in %, deg, and px:
for repeating-radial-gradient we have:
for repeating-conic-gradient we:
We can use background-size (and background-position) to multiply the background effect:
Checkboard conic-gradient effect
We use color-stop to set each color for 1/4 of the area, then we set this gradient for 1/4 (50%, 50%) of the size available:
we use background-position to display it in a different order:
The same works for radial-gradients:
Radial-radient circles effects
Background-size defines colors-stops size:
Only even-numbered gradients will we "cut" on the sides by position:
We can use percentages for position:
There is a difference between the gradient position and the background-position occupied by the gradient. The first can be set with % relative to the container, the second needs this custom values on 100% background-size.
We can find many more gradient designs HERE and Here.
Conic Metal shiny effect with 6 HSL colors
We use a conic-gradient as background, It works on any HSL color; Hue, Saturation, and Lightess:
In order to add more internal colors we don't use borders (harder to color) but :before/:after:
Mask layers and images
The mask property hides portions of the background based on its opacity values. Transparent areas of the mask make the background visible, while opaque areas hide it.
The mask layer varies based on the transparency, defined with rgba() opacity values.
There can be multiple masks on the same container, and the background will be visible only where all the masks are opaque, regardless of the mask size, while leaving the remaining areas transparent.
The mask-size/position/repeat properties are the same as background. Mask-clip defines the padding/border/content-box area of the mask.
The mask-compose defines how to combine multiple mask layers:
add: The mask layers are overlayed.
subtract: The second mask is subtracted from the first, creating a hole in it.
intersect: Only the areas where all the masks overlap will be visible.
exclude: The first mask is excluded from the second, like substract but in reverse order
Gradients on mask layers
We create custom borders by using transparent maks on backgrounds.
We control the size and position of no-repeat gradients to create a specific background.
We let the radial be visible only on the transparent conic sections, while hiding it in opaque ones.
We create simil-border effects by overlaying transparent gradients on the background.
The radial-gradients have double transparent steps for a color-border effect. We center a conic-gradient to the top left and set the container to a transparent section (180-270deg) to let only the offset center visible, also we cut background-size for the radials.
We create a faster corner radial effect by using the background-position negative on the radial center, while keeping the double transparent step. We do the same with the horizontal and vertical linear gradients, while cutting their sizes for the radials.
Here are more examples on custom corner effects and streamlined borders.
The conic-gradients() cuts angles from the corners, and the center offset makes them visible. We use the transparent degree for the color step and on the starting angle origin, the calc() function depends on the gradient background position.
We mask a transparent/color double linear gradient for each corner and side of the background.
Last updated