Topic
Tagged “css”
15 pieces
All topics
- ResourceReferenceTailwind CSS DocsSearchable reference for every Tailwind utility, with v4 token syntax up front. v4 changed enough that muscle memory from v3 isn't enough anymore.
- ResourcePlaygroundCodePenHTML/CSS/JS playground tuned for share-friendly front-end demos. Still the cleanest place to share a CSS curiosity in one link.
- ResourceToolContrast CheckerPaste two colors, see WCAG AA / AAA pass-fail for normal and large text with a live sample preview. Every time I tweak a token I want to know whether the pair still clears the accessibility bar — without leaving the page.
- ResourceToolColor ConverterThree-way Hex ↔ RGB ↔ HSL converter with a live swatch, lightness shades, and one-click copy. Tailwind v4 token tweaks are easier when the same color reads in every notation at once.
- ResourceToolShadow GeneratorLive box-shadow builder — drag the sliders, copy CSS or a Tailwind arbitrary class. Inset toggle, any CSS color. Shadow stacks are easier to feel than to read, and the Tailwind arbitrary-value syntax is fiddly to type by hand.
- ResourceToolPixel ↔ REM ConverterConvert px ↔ rem / em at a configurable base. Common-size ladder with Tailwind class hints. Reading design specs in px and writing CSS in rem is a daily two-window dance — this collapses it.
- ResourceToolGradient GeneratorMulti-stop linear and radial gradients with live preview, drag-to-reorder stops, and CSS + Tailwind output. Skip the round-trip to Coolors when you just want a quick hero gradient with the project's accent.
- ResourceToolCSS TriangleBorder-trick triangle generator. Pick direction, size, and color; copy a ready-to-paste rule. Speech-bubble carets and tooltip arrows show up in every UI; remembering the border hack does not.
- ResourceToolCubic Bezier EditorDrag the two control handles, preview the curve, and copy a cubic-bezier() value ready for transition-timing-function. Easings are felt, not read — the curve has to be tunable in place.
- ResourceToolGlassmorphismLive backdrop-filter preview — blur, saturation, tint, border, radius — with copyable CSS. Frosted-glass cards are a four-property combo; iterating live beats guessing pixel values.
- ResourceToolBorder RadiusFour-corner border-radius editor with linked toggle, live preview, and CSS + Tailwind arbitrary-class output. Asymmetric radii are awkward to type out; this makes them point-and-click.
- ResourceToolBox Model VisualizerType margin, border, padding, and content values; see the live box-model render and the computed CSS. Teaching tool plus a fast sanity-check when a layout looks 2px off in the wrong direction.
- ResourceToolColor Palette ExtractorDrop or upload an image; pull its N most-prominent colors via median-cut quantization. Runs entirely in the browser. Sampling brand colors out of a screenshot without an Adobe round-trip — and the file never leaves the page.
- Notenotenote noteTIL `text-wrap: pretty` is finally wide enough to just use ✨ headings stop orphaning a lonely last word on their own — no more manual `<br>` hacks. small thing, makes type feel intentional.
- Noterepostrepost notejosh comeau's css writing is still the gold standard 🔗 send it to anyone who tells you css is easy. or that it's impossible. somehow both are true.