CSS Text Shadow Generator
Build a text-shadow with a live preview: single, soft, glow, outline, emboss or a stepped long shadow, each a layer recipe made for thin strokes.
text-shadow: 2px 2px 4px rgb(11 16 32 / 0.6);CSS Text Decoration 3 →The decisions behind a design, made explicit: colour you can defend, CSS you would otherwise nudge by hand, and the units a layout rests on.
Build a text-shadow with a live preview: single, soft, glow, outline, emboss or a stepped long shadow, each a layer recipe made for thin strokes.
text-shadow: 2px 2px 4px rgb(11 16 32 / 0.6);CSS Text Decoration 3 →Build a modular type scale from a base size and a ratio, preview every step at its real size, and copy it out as CSS custom properties.
--font-size-lg: 1.953rem;CSS →One brand colour becomes a full interface palette: surfaces, borders, text, primary and status colours, each fitted to the contrast it needs.
--ui-text-muted: #656F82; /* 4.70:1 */OKLCH →Build a section divider as inline SVG: waves, a curve, a tilt, an arrow or steps, on a stretching viewBox so it fits any width.
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">SVG 1.1 →Build a 50 to 950 colour scale from one colour, in OKLCH so every step is even to the eye, ready to paste into a Tailwind theme.
--color-brand-500: oklch(64% 0.2326 264);Tailwind theme →Grid lines and intersections in pixels for any frame, with the golden-ratio grid beside them and what a centred social crop leaves of your composition.
A convention from 1797, not a lawArithmetic →Every measurement the browser reports, each next to what it actually measures, since screen, window, viewport and pixel ratio are four different numbers.
Viewport is not screen sizeBrowser →Smooth random blobs that fit their viewBox exactly, because the bounds are solved rather than guessed, with the SVG, a CSS background and a clip-path.
6 points · 45% wobble · fits the box exactlycrypto.getRandomValues →Percentages to pixels with the basis named per property, including the one everybody trips on: percentage padding resolves against width, even top and bottom.
25% of 1200px = 300px · padding % is of widthCSS Values 4 →What pixel dimensions cost in bytes uncompressed, as a file in each format, and in browser memory once decoded, which is the number that crashes phones.
Decoded memory ignores the file sizeArithmetic →Generate valid, ready-to-paste WordPress code in seconds without configuring a local runtime.
Your input is never uploaded
No submit button, no waiting
Copy, download or share a link
Built by Pixarlabs for WordPress
Clean output that follows WordPress conventions, no bloat, and everything computed in your browser.
Tools run in your browser. Database names, prefixes and secret salts you type are never sent to a server.
$ uploaded: 0 bytesGenerated code uses translatable labels, safely quoted values and the core hooks WordPress expects.
$ add_action( 'init', 'register_book' );Copy the result, download a ready file, or share a link that restores your settings.
$ download wp-config.php