CSS and web
CSS gradients, SVG, Tailwind and fast, beautiful web backgrounds.
200 guides · 11 topics
CSS and webCSS linear gradient: the complete guide to linear-gradient()
6 min read
Every part of linear-gradient() explained with a live example beside its code, from the default direction to hard stops, layered sheens and smoother OKLCH blends.
CSS and webCSS radial gradient: shapes, sizes and positions
5 min read
radial-gradient() draws colour outwards from a point. Here is every part of it, with live examples, plus the layering tricks behind soft glows, spotlights and vignettes.
CSS and webCSS conic gradient: wheels, pie charts and sheen
4 min read
conic-gradient() sweeps colour around a point like the hand of a clock. That one idea draws colour wheels, pie charts, donut charts, metallic sheen and starbursts.
CSS and webCSS mesh gradient: how to build one from radial layers
5 min read
There is no mesh-gradient() in CSS. Here is the layering method that fakes one convincingly, the blur and grain that finish it, and when an image or a shader is the better call.
CSS and webGradient text in CSS, done well
5 min read
Three lines of CSS put a gradient inside your letters. Making it readable, robust and tasteful takes a few more, and knowing when to leave the text plain.
CSS and webCSS gradient border: four ways to draw one
5 min read
border-color does not take a gradient, so every gradient outline is a workaround. Here are the four that matter, what each can and cannot do, and which to reach for.
CSS and webCSS animated gradient backgrounds, done properly
4 min read
Gradients cannot be animated directly, but everything around them can. Four techniques, what each costs the browser, and how to keep motion calm and optional.
CSS and webCSS gradient OKLCH interpolation for smoother blends
5 min read
Most dull, grey-middled gradients are not a colour problem but a maths problem. Two words, in oklch, change where the browser does the maths.
CSS and webCSS noise texture: adding grain to gradients with SVG
5 min read
A faint layer of noise hides banding and makes flat screen colour feel like print or film. Here is the SVG filter behind it, tuned and ready to paste.
CSS and webTailwind gradient classes: linear, radial and conic in v4
5 min read
Tailwind v4 renamed its gradient utilities, added angles, radial and conic gradients, and switched the default blend to oklab. Here is the whole system, with the CSS each class produces.
CSS and webSVG gradients: linear, radial, strokes, text and masks
5 min read
SVG has its own gradient system, older than CSS gradients and able to do things they cannot: colour a stroke, fill a word, share one gradient across many shapes, and fade anything with a mask.
CSS and webGradient buttons in CSS that feel premium
4 min read
Most gradient buttons look cheap for the same few reasons: too many hues, a hover that jumps, and text that fades into the light end. Here is the recipe that avoids all three.
CSS and webCSS gradient performance: do gradients slow a site down?
6 min read
A static CSS gradient is almost free. The costs come from what people do with gradients: huge blurs, backgrounds that repaint on scroll, and animations that never stop. Here is how to tell the difference.
CSS and webCSS patterns with repeating gradients
5 min read
Hard colour stops turn gradients into shapes, and background-size turns shapes into tiles. With those two ideas you can draw most classic patterns in a few lines, with no image files.
CSS and webFigma gradients: tips for smoother results
5 min read
Figma makes a gradient in two clicks and a good one in twenty. Here is the fast path through the gradient editor, plus the fixes for grey middles, banding and CSS that does not match.
CSS and webWebGL gradient shaders, explained for designers
7 min read
Some gradients on the web drift, glow and shimmer in a way no image or CSS rule can. They are shaders. Here is how they work, in words a designer can use.
CSS and webEmail gradient backgrounds: what works in Gmail and Outlook
6 min read
Gradients look wonderful in a browser and unpredictable in an inbox. Build them in layers, and every reader gets something that looks intended.
CSS and webDynamic OG images: generate link previews automatically
6 min read
Hand-making a preview image for every page doesn't scale, and one generic image for the whole site wastes the most-seen picture you have. Generate them instead.