Jakub KrehelA deep dive into how gradients work, how colour models affect them, and why some gradients look better than others.
Summary
Gradients look like the simplest thing in CSS and hide a real amount of complexity. Jakub starts with the three types, linear, radial and conic, then moves through direction, colour stops, hard stops and repeating patterns. The part that matters most is interpolation, because the colour model doing the blending is what decides whether a gradient reads clean or muddy. Two stops at the same position give you a crisp edge instead of a blend, which turns the property into a pattern tool. Everything is interactive, so you can change a value and see the result.
View full writingGoes well with
better-colors
Move a project to OKLCH, and answer anything about colour.
Convert colours, generate palettes, check contrast, clamp to a target gamut, set up fallbacks. Semantic tokens rather than a pile of hexes.
npx skills add https://github.com/jakubkrehel/skills --skill better-colors
Gradient Border Plugin
Tailwind gradient borders via mask-composite.
Florian KiemCraftColorMirrors Tailwind's gradient utilities with from / via / to colour stops, configurable widths, and an animated variant.
https://gradient-border.floriankiem.com
OKLCH.fyi
Convert, generate and explore OKLCH colour.
Jakub KrehelColorPick a colour, convert between models, build a palette and check it against the sRGB and Display-P3 gamuts. The practical companion to Jakub's own writing on why perceptual uniformity changes how you build a set.
https://oklch.fyi