Notes on gradients
Researching CSS gradients
There are 3 types of gradients browsers can render: linear, radial and conic. Those types have can have the repeating property to generate the in a repeating fashion.
Gradients can be used in all places the normal image can, like in backgrounds. Teh advantage of using gradients is that they are dynamically created by the browser and can behave better when zoomed in than the raster renders.
The basic linear gradient declaration linear-gradient(start-color, end-color)
creates a gradient starting from the top od the element with the start-color
and spanning to the end-color
at the bottom. This direction can be changed using either to
declaration (e.g. to right
or to bottom right
) or by passing an angle. In case of an angle, 0deg
will create a gradient starting at the bottom and 180deg
will start from the top. 90deg
would be the equivalent of using to right
, where the start-color
is on the left.
Gradient’s colors can have the start and stop points defined. This makes sure the color will remain solid between those points, and will only start mixing outside of them. This can also create gradients with only solid colors, like rainbow or a flag, when the start and stop points match.
linear-gradient(to right, red 50%, blue 50%)
By default, the dominant color switches halfway through the colors, but you can add a color hint to change the behaviour to any point you want. The dominant color will start taking over at that point and continue up to the solid color start point.
linear-gradient(to right, red, 20%, blue)
Type of the color interpolation can be defined to create desirable effects. You can define the interpolation in oklab
or hsl
. Using hsl
adds another option do define the length of the interpolation, either shorter hue
or longer hue
.
linear-gradient(90deg in hsl shorter hue, red, blue)
linear-gradient(90deg in hsl longer hue, red, blue)
Radial gradient works by radiating the color change from some central point towards the edges. By default, it’s the center of the element on which the gradient is defined. You can change it by setting the position using the at x y
directional property.
Radial gradients, unlike the linear ones, can be sized using length or keywords: closest-corner
, closest-side
, farthest-corner
(default), and farthest-side
. This will decide for how long the color change will go until it reached the solid state.
Another thing is that you can decide if the gradient is going to be a circle
or an ellipse
.
background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige);
Conic gradient creates a gradient similar to the radial gradient, but with the color change rotation around the center (gradient’s arc). Most of the conic gradient’s properties are similar to the radial gradient. Additionally, you can specify the starting angle of the gradient.
background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige);
Researching CSS gradients
Looking into the way backdrop filters are applied to create interesting effects on elements.
Remix enables two-way communication between nested routes using handles and outlet context.
Using the same form in multiple routes is easy with Remix.