Design Tools
Design tool guides covering color palettes, CSS gradients, shadows, typography, previews, and practical visual decisions for web projects.
Articles in Design Tools
- Color Theory in Code: How Our Palette Generator Builds Harmonies and Checks Contrast
Color theory articles usually show color wheels and name feelings. This one shows the arithmetic. Our palette generator implements each classical harmony as a fixed rotation in HSL space, and our contrast checker implements WCAG luminance with gamma correction. Reading both reveals a trap most guide
- Lorem Ipsum Without Randomness: Inside a 59-Word Generator
Paste the default output of our lorem ipsum generator into two different mockups and you get identical text. The tool contains no random number generator. Every designer who opens the page with the same slider settings sees the same paragraphs, in the same order, every time. That is a design decisio
- Free Color Extractor: Pull Palettes from Any Image in Your Browser
Compare color extraction tools (Adobe Color, Coolors, ColorZilla) and position WebRecast Color Extractor as the best free browser-based alternative.
- How to Pair Fonts: Four Working Defaults and the Fallback Bug to Fix
Copy the CSS from a font pairing tool, paste it into your stylesheet, and you can ship a fallback stack that contradicts your own font choice. Our font pairer has this exact bug in its copied output. This article walks through the four default pairs the tool ships, the rules behind them, and the thr
- WCAG Contrast Checker: The Exact Formula, Four Thresholds, and a Worked Example
A designer hands you a palette, and two of the text pairs are unreadable for a meaningful share of users. Arguing about it is slower than computing it. This guide explains the WCAG contrast checker we ship at the source-code level, so you know what the number on screen means, where it comes from, an
- SVG Editor Guide: Sanitize, Validate, and Recolor Vector Code in the Browser
You exported an SVG from a design tool and you need one thing changed: a color, a dimension, or a cleanup pass before it ships. Full design suites are the wrong tool for that job. This guide covers the browser-based SVG editor we ship, including the parts it deliberately refuses to do, because knowi
- CSS Border Radius Generator Values: Corner Order, Presets, and the Clamping Rule
Four numbers in, one declaration out, and still border-radius produces bugs in review. The causes are predictable: corner order, unit choice, and a clamping rule that fires when adjacent radii overlap. We ship a border radius generator, and its own presets demonstrate all three, including one preset
- Glassmorphism CSS Generator: The Exact Output It Emits and Where It Breaks
Glassmorphism sells a specific promise: a card that looks like frosted glass floating over your background. The reality is five CSS lines, and most tutorials hand you a snippet without saying which parts are safe to tune or what happens in browsers that ignore the effect. This guide documents the ge
- CSS Text Shadow Generator: Typography Effects From the Exact Output
Most text shadow tutorials show finished effects and skip the decisions a generator has to make. Ours emits one exact string per state, and reading that string teaches the property faster than any gallery. This article walks the real component, the five presets it ships with their actual values, and
- CSS Flexbox vs Grid: Choosing the Right Layout System
Flexbox is one-dimensional, Grid is two-dimensional. Compare axes, use cases, and real-world patterns like navbars, card grids, and the holy grail layout.
- Color Theory for Developers: HEX, RGB, HSL, and OKLCH Explained
HEX, RGB, HSL, and OKLCH each solve a different problem. Learn color models, modern CSS color spaces, WCAG contrast, and color-mix to pick and manipulate colors well.
- AI Prompt Template Anatomy: What Our Generator Actually Assembles
Most prompt generators show you one output and hide the template. Ours assembles three strings from four parts, and every part is visible in the source. This article takes the template apart so you know exactly what you paste into Midjourney, DALL-E 3, or Stable Diffusion, including two translation
