The journal.
Guides to gradients, colors, glass effects, and page layouts, with code examples you can use. For the interface of an AI product, see the AI Components.
Building with AI agents
22 notes
Gradient text in CSS that stays readable
The background-clip: text recipe with its -webkit- prefix, a solid-color fallback with @supports, fixes for clipped descenders, invisible selections, and icons, contrast at every stop, and the Tailwind CSS v4 classes.
Grid, dot and stripe backgrounds in pure CSS
Build grid, dot, stripe and checkerboard patterns from gradients and background-size, fade them with mask-image, add a glow, keep them quiet behind text, and write them as Tailwind v4 classes.
Turning a color palette into UI color tokens
How to map a four- or five-color palette onto interface roles: neutrals, primary and accent, semantic states, and surface, border, and text tokens as CSS custom properties, with light and dark themes and contrast checks for every pair.
Choosing AI chat components for the conversation you are building
Start with the interaction: a short question, a long conversation, a research answer or a coding agent. Each needs a different set of components.
Designing agent activity people can actually follow
How to show tool calls, approvals, plans and parallel work without turning every event into another card in the conversation.
What a reusable AI component should own
Separate presentation, application state and model transport so the component still works when the demo data disappears.
Building mesh gradients from layered radial gradients
CSS has no mesh gradient, but stacked radial-gradient() layers over a base color get close. How layer order, positions, transparent stops and sizing work, when to export a PNG instead, and how to animate one without repainting the page.
Animating SVG icons in React with Motion
Draw-on strokes with pathLength, hover and tap variants that also respond to keyboard focus, reduced-motion fallbacks with useReducedMotion, and sizing props, using the motion package in React.
OKLCH and the Tailwind CSS v4 color palette
What the three numbers in oklch() mean, why Tailwind v4 switched its palette to them, how gamut and HEX fallbacks work, and how to define your own colors with @theme.
Layered box shadows that look like real depth
How offset, blur, and spread interact, why two or three stacked shadows read better than one, and how to build an elevation scale in CSS and Tailwind CSS v4, including colored, inset, and dark-mode shadows.
Writing CSS keyframe animations
How @keyframes and the eight animation longhands work together: timing functions, steps(), fill modes, stacking animations, restarting them, and the bugs that show up most often.
Gradients in Tailwind CSS v4
How bg-linear, bg-radial, and bg-conic work in Tailwind CSS v4: angles, stop positions, interpolation modifiers, arbitrary values, and what changes when you migrate from bg-gradient-to-*.
Gradient, mesh, or glass? Choosing a background treatment
What each treatment is made of in CSS, where each one works, the mistakes that come with it, and how to combine them without losing readable text.
Designing a generator page: preview, controls, output, and the words around them
How to lay out a CSS or color generator so people can start immediately, trust the output, and find answers to the questions the tool raises, with code from GradientDeck's own tools.
Glassmorphism in Tailwind CSS v4: blur, fallbacks, and readable text
Build a glass surface with Tailwind v4 utilities, find out why a blur sometimes does nothing, add a solid fallback, and check text contrast over the real background.
Hero section layouts: choosing a first screen for what you have
Split layouts, product-first heroes, typographic heroes, and when to skip the hero entirely, with Tailwind examples, mobile order, and loading advice.
WCAG contrast for designers: checking the colors that actually meet
The WCAG 2.2 thresholds, how the ratio is calculated, and how to check text, controls, focus rings, gradients, glass, and dark mode with measured examples.
Avoiding generic UI: giving an interface its own point of view
The default patterns that make a page look like every other generated page, a before-and-after rewrite of a typical hero, and how to use an automated audit without trusting it blindly.
Building a therapist booking page: palette, structure, and form
A worked example: turning a calm teal into accessible tokens, ordering the page around booking, writing the form, and reviewing it, using GradientDeck tools along the way.
Ready to try an example? Open a tool.
Browse the tools