5 More Tools: Design Builders, Base Converter, and More

# 5 More Tools: Design Builders, Base Converter, and More

We keep building. This update brings 5 new tools focused on design workflows and developer utilities, pushing our total to 36 free tools. We also shipped several quality-of-life UI improvements including category badges, a redesigned 404 page, and better keyboard accessibility. This post covers everything that landed, with deep practical guides for each new tool.

New Tool: CSS Box Shadow Generator

Design CSS box shadows with an intuitive visual builder. Adjust offsets, blur, spread, and color with live sliders. Add multiple shadow layers for complex effects like neumorphism. Includes presets for Soft, Elevated, Sharp, Neumorphic, and Inner Glow.

Understanding Box Shadow Syntax

Before reaching for the Box Shadow Generator, it helps to understand the syntax. The box-shadow property in CSS has this structure:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Each parameter explained:

Practical examples:

/* Simple drop shadow */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

/* Stronger elevated shadow */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);

/* Sharp shadow with no blur (flat design) */
box-shadow: 4px 4px 0 0 #000000;

/* Inner shadow (pressed/inset button feel) */
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);

/* Glow effect (colored shadow) */
box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.6);

/* Multiple shadows combined */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

The Shadow Presets Explained

The generator ships with five presets that cover common shadow design patterns:

Soft - Ideal for cards and panels in light-colored UIs. Large blur radius, minimal offset, low opacity. Creates the impression of floating just slightly above the surface.

/* Soft */
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);

Elevated - Stronger vertical offset and higher opacity. Suggests the element is significantly raised above the page surface. Used for modals, dropdowns, and pop-up menus.

/* Elevated */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15);

Sharp - Zero blur radius. The shadow edge is clean and geometric. Popular in flat design and retro/neo-brutalist UI styles.

/* Sharp */
box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.8);

Neumorphic - The signature effect of neumorphism (new skeuomorphism). Two shadows: one light and one dark, opposite sides, creating the illusion that the element is extruded from the background surface. Requires knowing the background color to work correctly.

/* Neumorphic - works on a #E0E5EC background */
box-shadow: 6px 6px 12px #B8BECE, -6px -6px 12px #FFFFFF;

The neumorphic effect is highly background-dependent. If you change the background color, you must recalculate both shadow colors. The generator handles this automatically.

Inner Glow - An inset shadow with a colored blur creates a glow inside the element. Used for active states, focused input fields, and selection indicators.

/* Inner glow */
box-shadow: inset 0 0 12px 3px rgba(59, 130, 246, 0.35);

Layering Multiple Shadows

CSS allows you to stack multiple box shadows using comma separation. Each shadow renders from front to back in the order listed. This is how you achieve rich, realistic depth:

/* Google Material Design elevation: 4dp */
box-shadow:
  0 2px 4px -1px rgba(0,0,0,0.2),
  0 4px 5px 0 rgba(0,0,0,0.14),
  0 1px 10px 0 rgba(0,0,0,0.12);

/* Google Material Design elevation: 8dp */
box-shadow:
  0 5px 5px -3px rgba(0,0,0,0.2),
  0 8px 10px 1px rgba(0,0,0,0.14),
  0 3px 14px 2px rgba(0,0,0,0.12);

/* Multi-layer subtle shadow */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07);

The last example uses a logarithmic progression of shadow sizes (1, 2, 4, 8px) with the same low opacity. This technique, popularized by Josh Comeau, creates a physically realistic shadow that mimics how light scatters from a real light source.

Box Shadow Performance

box-shadow is a composited property - the browser handles it on the GPU compositor, which means it does not trigger layout recalculation when animated. This makes it safe to animate in CSS transitions:

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 200ms ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

This transition is smooth because the browser only repaints the shadow layer, not the entire layout. Contrast this with margin, padding, or width transitions, which trigger layout recalculations and are significantly more expensive.

Dark Mode Box Shadows

On dark backgrounds, black shadows are invisible. In dark mode, there are two approaches:

Approach 1: Increase element contrast instead of adding shadows

/* Dark mode card - use borders instead of shadows */
.card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Approach 2: Use subtle light glow

/* Subtle glow effect works on dark backgrounds */
.card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
              0 4px 16px rgba(0, 0, 0, 0.4);
}

The Box Shadow Generator lets you experiment with colors visually so you can find the right treatment for your specific background.

New Tool: CSS Gradient Generator

Create stunning CSS gradients with support for linear, radial, and conic types. Add multiple color stops, adjust angles and positions, and see a live preview. Includes a gallery of preset gradients.

Gradient Types in CSS

Linear gradients flow in a straight line from one color to another:

/* Basic two-color gradient, top to bottom */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* Diagonal gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-stop gradient */
background: linear-gradient(to right, #ff0000, #ff8800, #ffff00, #00ff00, #0000ff);

/* Using specific angles */
background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

Radial gradients radiate outward from a center point:

/* Circle from center */
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

/* Ellipse (default) */
background: radial-gradient(ellipse at center, #667eea 0%, #764ba2 100%);

/* Positioned radial gradient */
background: radial-gradient(circle at 70% 30%, #667eea 0%, #764ba2 100%);

/* Multi-stop radial */
background: radial-gradient(circle at center, #fff 0%, #667eea 40%, #764ba2 100%);

Conic gradients sweep around a center point like a pie chart:

/* Basic conic gradient */
background: conic-gradient(from 0deg, red, yellow, green, blue, red);

/* Pie chart effect */
background: conic-gradient(
  #FF6B6B 0deg 90deg,
  #4ECDC4 90deg 200deg,
  #45B7D1 200deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(30, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(90, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(150, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(210, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(270, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(330, 100%, 50%),
  hsl(360, 100%, 50%)
);

The Preset Gallery

The Gradient Generator ships with named presets covering common design patterns:

Sunset - Warm reds and oranges fading to deep purple:

background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

Ocean - Teal to deep blue, evocative of water:

background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

Neon - Bright, high-saturation colors with a cyberpunk feel:

background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);

Midnight - Deep blues and purples for dark UI backgrounds:

background: linear-gradient(135deg, #0c3483 0%, #a2b6df 100%, #6b8cce 100%);

Gradient Color Stop Strategies

Hard stops - two color stops at the same position create a sharp line instead of a blend:

/* Striped flag pattern */
background: linear-gradient(
  to right,
  #002395 0% 33.33%,
  #FFFFFF 33.33% 66.66%,
  #ED2939 66.66% 100%
);

Transparent stops - fade a color to fully transparent:

/* Fade out overlay */
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.7) 100%
);

This pattern is widely used for text-over-image overlays. The gradient sits on top of a background image and makes text readable at the bottom where the dark overlay is strongest.

Midpoint adjustment - control where the transition happens:

/* Slow start, fast transition at 80% */
background: linear-gradient(to right, #667eea 0%, #667eea 60%, #764ba2 100%);

/* Standard blend with midpoint adjusted */
background: linear-gradient(to right, #667eea, 80%, #764ba2);

Gradients in Text

CSS gradients can be applied to text using the background-clip technique:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

<h1 class="gradient-text">Beautiful Gradient Text</h1>

This is a widely used design pattern for hero headings. The gradient is clipped to the shape of the text characters, creating a colored gradient effect on the letterforms themselves.

Animated Gradients

Gradients cannot be transitioned directly in CSS (they are not animatable properties). The workaround is to animate background-position on a larger-than-viewport gradient:

.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

New Tool: Markdown Table Generator

Build Markdown tables visually instead of wrestling with pipes and dashes. Click to edit cells, add and remove rows and columns, set column alignment, and get the generated Markdown in real time.

Why Markdown Tables Are Painful to Write

Markdown tables have a well-documented ergonomic problem. The syntax requires a separator row after the header, and columns must be aligned with pipes for readability:

| Name       | Type   | Required | Default |
|------------|--------|----------|---------|
| className  | string | No       | ''      |
| disabled   | bool   | No       | false   |
| onClick    | func   | No       | -       |
| children   | node   | Yes      | -       |

Writing this by hand, keeping the pipes aligned, adjusting spacing when you add a column - it is the kind of tedious formatting that pulls your attention away from the content you are trying to communicate.

The Markdown Table Generator handles all of that formatting automatically.

Markdown Table Syntax Reference

Basic syntax:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell     | Cell     | Cell     |
| Cell     | Cell     | Cell     |

Column alignment:

| Left aligned | Center aligned | Right aligned |
|:------------|:--------------:|--------------:|
| Content      | Content        | Content       |

The colon in the separator row controls alignment:

• :--- - left align (default)
• :---: - center align
• ---: - right align

The separator row minimum:

You only need three dashes minimum per column:

| Name | Age |
|---|---|
| Alice | 30 |

Most Markdown renderers accept this, though some style guides prefer the columns aligned.

Where Markdown Tables Are Used

GitHub READMEs and documentation:

Markdown tables render beautifully on GitHub and are the standard format for comparison tables, API reference tables, configuration option lists, and changelog summaries.

PR descriptions:

Summarizing before/after performance benchmarks, or listing affected components, in a table makes review much easier:

| Test | Before | After | Change |
|------|--------|-------|--------|
| First Paint | 1.2s | 0.8s | -33% |
| LCP | 2.1s | 1.4s | -33% |
| Bundle size | 142kb | 98kb | -31% |

Notion, Obsidian, and other Markdown editors:

Many note-taking and knowledge management tools use Markdown. Tables in these systems are best generated with a tool rather than typed by hand.

Jekyll and other static site generators:

Content written in Markdown for static sites benefits from well-formatted tables. The generator ensures the output is compatible with all standard Markdown parsers.

Markdown Table Limitations

Markdown tables cannot:

• Span cells across multiple columns or rows (colspan/rowspan)
• Contain line breaks within a cell
• Include images or complex HTML inline (in most parsers)
• Have nested tables

For complex tabular data requiring these features, HTML tables inside Markdown are the fallback:

<table>
  <thead>
    <tr>
      <th colspan="2">Grouped Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

New Tool: Number Base Converter

Convert numbers between decimal, binary, octal, and hexadecimal in real time. Type in any field and all others update instantly.

Understanding Number Bases

Every number system is defined by its base - the number of distinct digits it uses before rolling over to the next place value. Humans use base 10 (decimal), computers work natively in base 2 (binary), and hexadecimal (base 16) is the most readable compact representation of binary data.

Base system overview:

Place values:

In decimal, each position is a power of 10: 1, 10, 100, 1000...

In binary, each position is a power of 2: 1, 2, 4, 8, 16, 32, 64, 128...

In hexadecimal, each position is a power of 16: 1, 16, 256, 4096...

Example: Converting 255 to all bases:

Decimal: 255
Binary:  11111111   (2^7 + 2^6 + 2^5 + 2^4 + 2^3 + 2^2 + 2^1 + 2^0 = 255)
Octal:   377        (3×64 + 7×8 + 7×1 = 192 + 56 + 7 = 255)
Hex:     FF         (15×16 + 15×1 = 240 + 15 = 255)

255 in hexadecimal is FF - two F's, which is why #FFFFFF is white in CSS (all color channels at maximum value).

Where You Encounter Different Bases as a Developer

Binary:

• CPU instruction sets and register values
• Bitwise operations in code
• Network protocol packet headers
• Bitfield/bitmask values

Octal:

• Unix file permissions (chmod 755 - that 755 is octal)
• Escape sequences in C strings (\077)
• Legacy network addressing

Hexadecimal:

• Colors in CSS and design tools (#3B82F6)
• Memory addresses in debuggers (0x7fff5fbff8a8)
• SHA hashes and other cryptographic output
• UUID values (a3bb189e-8bf9-3888-9912-ace4e6543002)
• MAC addresses (00:1A:2B:3C:4D:5E)
• Unicode code points (U+1F600)
• Binary file data in hex editors

Quick Reference Conversion Table

Conversion in Code

JavaScript:

// Decimal to other bases
(255).toString(2)   // "11111111" - binary
(255).toString(8)   // "377" - octal
(255).toString(16)  // "ff" - hexadecimal

// Other bases to decimal
parseInt("11111111", 2)  // 255 - binary string to decimal
parseInt("377", 8)       // 255 - octal string to decimal
parseInt("ff", 16)       // 255 - hex string to decimal

// Hex with prefix
parseInt("0xff", 16)     // 255
Number("0xff")           // 255 - also works for hex literals

// Binary/octal literals in modern JavaScript
0b11111111  // 255 - binary literal
0o377       // 255 - octal literal
0xFF        // 255 - hex literal

Python:

# Decimal to other bases
bin(255)   # '0b11111111'
oct(255)   # '0o377'
hex(255)   # '0xff'

# Without prefix
format(255, 'b')  # '11111111'
format(255, 'o')  # '377'
format(255, 'x')  # 'ff'
format(255, 'X')  # 'FF' (uppercase hex)

# Other bases to decimal
int('11111111', 2)  # 255
int('377', 8)       # 255
int('ff', 16)       # 255

New Tool: Text to Binary Converter

Convert text to its binary representation or decode binary back to text. Supports full UTF-8, shows byte counts, and includes a swap button to quickly reverse the conversion direction.

How Text to Binary Conversion Works

Every character in digital text is stored as a number. The mapping from character to number is defined by a character encoding standard. The most common today is UTF-8, which is backward-compatible with ASCII for the first 128 characters.

ASCII character to binary mapping (selected characters):

Converting "Hi":

H = 72 (decimal) = 01001000 (binary)
i = 105 (decimal) = 01101001 (binary)

"Hi" = 01001000 01101001

Converting in JavaScript:

// Text to binary
function textToBinary(text) {
  return text
    .split('')
    .map(char => char.charCodeAt(0).toString(2).padStart(8, '0'))
    .join(' ');
}

textToBinary('Hi')   // "01001000 01101001"
textToBinary('Hello')
// "01001000 01100101 01101100 01101100 01101111"

// Binary to text
function binaryToText(binary) {
  return binary
    .split(' ')
    .map(byte => String.fromCharCode(parseInt(byte, 2)))
    .join('');
}

binaryToText('01001000 01101001')  // "Hi"

Use Cases for Text-to-Binary Conversion

Cryptography education - Learning about encryption algorithms often requires understanding that text is ultimately a sequence of bits. Seeing "HELLO" as 01001000 01000101 01001100 01001100 01001111 makes the point concretely.

Network protocol debugging - Binary protocol formats (Protobuf, Thrift, custom binary formats) are easier to inspect when you can convert known string values to their binary representation and look for them in packet captures.

Encoding understanding - The Text to Binary converter complements the Base64 encoder. Base64 encodes binary data as ASCII text; the text-to-binary tool shows the binary representation of ASCII text. Together they illustrate how data encoding works at different levels of abstraction.

CTF (Capture the Flag) challenges - Security competitions frequently involve encoding puzzles where binary representation of text is a layer in the solution.

UI Improvements

Category Badges with Tool Counts

Each category filter button now shows a count of tools in that category (e.g., "Developer 12", "Converter 9"). This makes it easy to see at a glance how many tools are available in each category before clicking.

From a UX perspective, badges on filter controls reduce the number of empty-state views users encounter. When users see "Image Tools 7" rather than a plain "Image Tools" label, they know before clicking that seven tools exist in that category - and they can manage their expectations accordingly.

Redesigned 404 Page

The "Page Not Found" page got a complete redesign with a gradient 404 heading, animated background, popular tool suggestions, and links to both the homepage and blog.

A well-designed 404 page serves several purposes:

Retention - Instead of losing a visitor who hits a dead link, the page gives them obvious paths back into the site: the homepage, the most popular tools, the blog.

Trust - A polished, on-brand 404 page signals that the site is cared for. A browser-default "404 Not Found" page signals the opposite.

SEO recovery - When a search engine follows a broken link to your site, a 404 page with helpful internal links allows the crawler to continue indexing your content instead of hitting a dead end.

Debugging information - For developers, a clear 404 page makes broken link detection during development more obvious.

Footer Resources Section

The footer now includes direct links to Blog, Changelog, Privacy Policy, and Terms of Service. Navigation footers serve users who scroll past all the main content looking for specific information - legal documents, contact information, or secondary pages that do not warrant prominent placement in the main navigation.

Keyboard Navigation Improvements

Added focus-visible outlines for keyboard navigation throughout the site. This is distinct from the older focus pseudo-class:

/* Old approach - always shows focus outline, even after mouse click */
button:focus {
  outline: 2px solid blue;
}

/* Better approach - only shows outline when navigating by keyboard */
button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

The :focus-visible pseudo-class shows the focus indicator only when the browser determines keyboard navigation is being used. This means:

• Mouse users do not see the outline ring after clicking a button (less visual clutter)
• Keyboard and screen reader users always see a clear focus indicator (full accessibility)

This is now the recommended approach per WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance).

The prefers-reduced-motion Media Query

Animations are disabled for users who have enabled "Reduce Motion" in their OS accessibility settings. This is implemented globally:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This matters for users with vestibular disorders, ADHD, epilepsy, and other conditions where motion effects can cause discomfort or physical symptoms.

What Is Next

These 5 new tools bring the collection to 36 tools total. We are continuing to build based on what developers and designers actually use. Upcoming additions include a Pomodoro timer for productivity, a chmod calculator for Unix permissions, additional CSS generators, and more text and code utilities.

Try all the new tools now:

• Box Shadow Generator - design box shadows with live preview
• Gradient Generator - build linear, radial, and conic CSS gradients
• Markdown Table Generator - create Markdown tables without wrestling with pipes
• Number Base Converter - convert between decimal, binary, octal, and hex
• Text to Binary - encode and decode text as binary

All tools are free, no signup required, and everything runs in your browser.