CSS and SVG gradients
A CSS gradient is not an image, it is a function that describes how to interpolate color along an axis (linear), from a center point (radial), or around an angle (conic), and the choice of interpolation space changes the visual result more than most people realize.
Without the "in" clause, the mix runs in sRGB; since the two colors are not both extremely saturated at once, this specific pair does not fall into the gray band.
The "in oklch" clause forces perceptual interpolation between the three stops, avoiding any grayed-out midtone between the first two colors, which on their own would already be candidates for the gray band in sRGB.
When the stop at 0% and the stop at 100% share the same color, the circle closes without a visible break; if they were different colors, a visible "seam" would appear exactly at the join between 0 and 360 degrees.
Yes. It builds the three types defined in the CSS specification, linear-gradient(), radial-gradient() and conic-gradient(), plus the repeating- variant of each, and hands you code that is ready to paste. You control the angle, the center, the shape and the size, add as many stops as you like and adjust the color, position and opacity of each one.
Because the default linear interpolation in sRGB mixes the R, G and B channels along a straight line, and that straight line can pass through a low-saturation region of the color space even when both endpoints are highly saturated. Switching the interpolation space to oklab or oklch, which follow a curve closer to human perception, avoids that dip.
Linear follows a straight axis at a fixed angle, radial spreads from a center point in a circle or ellipse to a defined edge (closest side, farthest side, closest corner, farthest corner), and conic sweeps around a point like clock hands, the only one of the three that can form a full circle of color without repeating.
It is the interpolation space clause from CSS Color 4: instead of mixing colors in sRGB (the default), the browser computes the intermediate steps in OKLCH, a more perceptually uniform space, which tends to avoid gray bands and produce transitions closer to what the eye expects.
Not directly: SVG defines gradients as their own elements, `<linearGradient>` with x1/y1/x2/y2 attributes and `<radialGradient>` with cx/cy/r, each containing `<stop offset="..." stop-color="..." stop-opacity="...">` children, instead of the compact function syntax used in CSS; the concept of color stops is the same, the markup syntax is different.
background-image: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%);The CSS and the PNG are generated locally in your browser.