Options reference

All 27 options are optional. Color options accept any CSS color (#004494, rgb(), hsl(), named). Length options accept any CSS length. Wrong types are ignored and the default is used. Every card links to the playground with that option applied.

Quick reference

Option	Type	Default	What it does
`pageTitle`	string	`"404 - Not Found"`	Browser tab title (document.title).
`bodyBackgroundColor`	string	`"white"`	Page background color.
`bodyFontColor`	string	`"black"`	Page text color.
`autoText`	boolean	`false`	Fill unset text fields from the built-in phrase pools.
`imgFileNames`	array	`[] (no image)`	The images you host.
`imgPattern`	string	`"" (off)`	Path template for numbered images.
`imgCount`	number	`0 (off)`	How many images the pattern generates.
`imgStartIndex`	number	`1`	First number used by the pattern.
`imgBorderRadius`	string	`"50%"`	Corner radius of the image.
`imgBoxShadow`	boolean	`false`	Show a shadow when the image is hovered.
`imgBoxShadowSize`	string	`"5px"`	Spread of the hover shadow.
`imgBoxShadowColor`	string	`"rgba(18, 0, 100, .4)"`	Color of the hover shadow.
`maxImgWidth`	string	`"1000px"`	Maximum width of the image column.
`imgResponsiveBreakpoints`	boolean	`true`	Re-flow the layout on small screens.
`imgAlt`	string	`"404 Error"`	Alt text of the image.
`actionIsBtn`	boolean	`true`	Render a button or a plain link.
`btnColor`	string	`"blue"`	Button background color.
`btnPulsate`	boolean	`true`	Pulse the button on load.
`btnPulsateCount`	number	`2`	How many times the button pulses.
`btnDisplayText`	string	`"Back to"`	Button or link label.
`btnDisplayHostName`	boolean	`true`	Append the hostname to the label.
`homeUrl`	string	`"/"`	Where the button, link and image point.
`headerText`	string	`"404 - File not found"`	Main heading.
`subHeaderText`	string	`"" (hidden)`	Paragraph under the heading.
`headerTextColor`	string	`"" (inherits bodyFontColor)`	Heading color.
`subHeaderTextColor`	string	`"" (auto)`	Sub-heading color.
`headerTextPosition`	string	`"right"`	Where the text sits relative to the image.

Page and body

The document title, the body colors and the autoText switch.

`pageTitle`

string default: "404 - Not Found"

Browser tab title (document.title).

Sets document.title when the page renders. With autoText: true, leave it unset to receive a random title.

Accepts: any string

javascript

RJLCustom404({
  "pageTitle": "Oops - page not found"
});

Try it in the playground

`bodyBackgroundColor`

string default: "white"

Page background color.

Applied as background-color on <body>. Pair a dark value with a light bodyFontColor.

Accepts: any CSS color

javascript

RJLCustom404({
  "bodyBackgroundColor": "#0b1220",
  "bodyFontColor": "#e5e7eb"
});

Try it in the playground

`bodyFontColor`

string default: "black"

Page text color.

Applied as color on <body>. When it is black ("black", "#000", "#000000" or "rgb(0, 0, 0)") the sub-header is auto-lightened to #666 unless subHeaderTextColor is set.

Accepts: any CSS color

javascript

RJLCustom404({
  "bodyFontColor": "#1f2937"
});

Try it in the playground

`autoText`

boolean default: false

Fill unset text fields from the built-in phrase pools.

When true, any of pageTitle, headerText, subHeaderText and btnDisplayText that you did not set is filled from a shuffled pool of 50 phrases: no repeats until the pool is exhausted, remembered per hostname in localStorage. Fields you set always win, and an empty string counts as set. When the button label is auto-picked, the phrase also decides whether the hostname is appended, overriding btnDisplayHostName for that render.

Accepts: true | false

javascript

RJLCustom404({
  "autoText": true
});

Try it in the playground

Images

Which images you host, how they are picked, and how they look.

`imgFileNames`

array default: [] (no image)

The images you host.

One is picked at random on each load. With two or more, the shuffle queue is stored in localStorage so a visitor sees every image before any repeat. No images are bundled: unset or empty renders [[ No 404 image configured ]], and a file that fails to load renders [[ <path> not found ]]. Takes precedence over imgPattern.

Accepts: array of paths or absolute URLs

javascript

RJLCustom404({
  "imgFileNames": [
    "/img/404-a.png",
    "/img/404-b.png"
  ]
});

Try it in the playground

`imgPattern`

string default: "" (off)

Path template for numbered images.

Generates imgFileNames from a template. {n} is replaced by the number; {nn} and {nnn} zero-pad to that width. Requires imgCount. Ignored when imgFileNames is set.

Accepts: a path containing {n}, {nn} or {nnn}

Only used with imgCount.

javascript

RJLCustom404({
  "imgPattern": "/img/404-{nn}.png",
  "imgCount": 12
});

Try it in the playground

`imgCount`

number default: 0 (off)

How many images the pattern generates.

Number of paths produced from imgPattern, starting at imgStartIndex. Zero means unset.

Accepts: integer greater than 0

Only used with imgPattern.

javascript

RJLCustom404({
  "imgPattern": "/img/404-{n}.png",
  "imgCount": 6
});

Try it in the playground

`imgStartIndex`

number default: 1

First number used by the pattern.

Use 0 for zero-based file names. Must be 0 or greater.

Accepts: integer 0 or greater

Only used with imgPattern.

javascript

RJLCustom404({
  "imgPattern": "/img/404-{n}.png",
  "imgCount": 6,
  "imgStartIndex": 0
});

Try it in the playground

`imgBorderRadius`

string default: "50%"

Corner radius of the image.

Applied inline as border-radius. 50% makes a square image circular; 0 keeps square corners.

Accepts: any CSS border-radius value

javascript

RJLCustom404({
  "imgBorderRadius": "24px"
});

Try it in the playground

`imgBoxShadow`

boolean default: false

Show a shadow when the image is hovered.

When true, hovering the image shows box-shadow: 0 0 25px <imgBoxShadowSize> <imgBoxShadowColor> and the image settles from scale 1.05 to 1.02.

Accepts: true | false

javascript

RJLCustom404({
  "imgBoxShadow": true
});

Try it in the playground

`imgBoxShadowSize`

string default: "5px"

Spread of the hover shadow.

The spread value of the hover shadow; the blur is fixed at 25px. Only used when imgBoxShadow is true.

Accepts: any CSS length

Only used with imgBoxShadow.

javascript

RJLCustom404({
  "imgBoxShadow": true,
  "imgBoxShadowSize": "15px"
});

Try it in the playground

`imgBoxShadowColor`

string default: "rgba(18, 0, 100, .4)"

Color of the hover shadow.

Use rgba() or an 8-digit hex to control opacity. Only used when imgBoxShadow is true.

Accepts: any CSS color

Only used with imgBoxShadow.

javascript

RJLCustom404({
  "imgBoxShadow": true,
  "imgBoxShadowColor": "rgba(0, 148, 158, 0.5)"
});

Try it in the playground

`maxImgWidth`

string default: "1000px"

Maximum width of the image column.

Applied as max-width on the image container. The image scales down inside it and never exceeds the column.

Accepts: any CSS length

javascript

RJLCustom404({
  "maxImgWidth": "480px"
});

Try it in the playground

`imgResponsiveBreakpoints`

boolean default: true

Re-flow the layout on small screens.

When true, a resize handler collapses left/right layouts to a single column at 768px and below and tightens the container padding at 480px and below. Font sizes and button padding always adapt through CSS regardless of this setting.

Accepts: true | false

javascript

RJLCustom404({
  "imgResponsiveBreakpoints": false
});

Try it in the playground

`imgAlt`

New in 1.3.0

string default: "404 Error"

Alt text of the image.

The alt attribute of the rendered image, for screen readers and for the text shown if the image cannot be displayed.

Accepts: any string

javascript

RJLCustom404({
  "imgAlt": "A lost robot holding a map"
});

Try it in the playground

Button

The way home: a button or a plain link, its label and its destination.

`actionIsBtn`

boolean default: true

Render a button or a plain link.

true renders a <button class="custom404-button"> that navigates to homeUrl on click; false renders an underlined <a> in the surrounding text color. btnColor, btnPulsate and btnPulsateCount only apply to the button.

Accepts: true | false

javascript

RJLCustom404({
  "actionIsBtn": false
});

Try it in the playground

`btnColor`

string default: "blue"

Button background color.

Applied as background-color on the button. The button text is always white, so choose a color with enough contrast.

Accepts: any CSS color

Only used with actionIsBtn.

javascript

RJLCustom404({
  "btnColor": "#004494"
});

Try it in the playground

`btnPulsate`

boolean default: true

Pulse the button on load.

When true, the button scales from 1 to 1.1 and back over 2 seconds, btnPulsateCount times.

Accepts: true | false

Only used with actionIsBtn.

javascript

RJLCustom404({
  "btnPulsate": false
});

Try it in the playground

`btnPulsateCount`

number default: 2

How many times the button pulses.

Number of 2-second pulse cycles. 0 disables the animation even when btnPulsate is true. Must be 0 or greater.

Accepts: integer 0 or greater

Only used with actionIsBtn, btnPulsate.

javascript

RJLCustom404({
  "btnPulsateCount": 5
});

Try it in the playground

`btnDisplayText`

string default: "Back to"

Button or link label.

With btnDisplayHostName true the hostname is appended after a space, for example "Back to your-site.com". With autoText, leave it unset to receive a random label.

Accepts: any string

javascript

RJLCustom404({
  "btnDisplayText": "Take me home",
  "btnDisplayHostName": false
});

Try it in the playground

`btnDisplayHostName`

boolean default: true

Append the hostname to the label.

Appends window.location.hostname to btnDisplayText. Overridden per render when autoText picks the label.

Accepts: true | false

javascript

RJLCustom404({
  "btnDisplayHostName": false,
  "btnDisplayText": "Go home"
});

Try it in the playground

`homeUrl`

New in 1.3.0

string default: "/"

Where the button, link and image point.

The destination of the button, the plain link and the image link. Defaults to the site root; set it when your site lives in a subfolder or you want to send visitors somewhere more useful than the home page.

Accepts: any URL

javascript

RJLCustom404({
  "homeUrl": "/en/"
});

Try it in the playground

Header and text

The heading, the sub-heading, their colors and where the text block sits.

`headerText`

string default: "404 - File not found"

Main heading.

Rendered as <h3 class="custom404-header">. With autoText, leave it unset to receive a random heading.

Accepts: any string

javascript

RJLCustom404({
  "headerText": "Well, this is awkward."
});

Try it in the playground

`subHeaderText`

string default: "" (hidden)

Paragraph under the heading.

Rendered as <p class="custom404-subheader"> only when non-empty. With autoText, an explicit empty string keeps it hidden.

Accepts: any string

javascript

RJLCustom404({
  "subHeaderText": "The page you asked for is not here."
});

Try it in the playground

`headerTextColor`

string default: "" (inherits bodyFontColor)

Heading color.

Applied inline to the heading. Empty inherits bodyFontColor.

Accepts: any CSS color

javascript

RJLCustom404({
  "headerTextColor": "#00949e"
});

Try it in the playground

`subHeaderTextColor`

string default: "" (auto)

Sub-heading color.

Applied inline to the sub-heading. Empty uses bodyFontColor, lightened to #666 when bodyFontColor is black.

Accepts: any CSS color

javascript

RJLCustom404({
  "subHeaderText": "Nothing lives at this address.",
  "subHeaderTextColor": "#94a3b8"
});

Try it in the playground

`headerTextPosition`

string default: "right"

Where the text sits relative to the image.

"right": image on the left, text on the right. "left": text on the left, image on the right. "top": text above the image. Left and right collapse to a single column at 768px and below. Invalid values fall back to the default.

Accepts: "top" | "left" | "right"

javascript

RJLCustom404({
  "headerTextPosition": "top"
});

Before 1.3.0 the source declared "top" as the default but never applied it, so an unset option has always rendered the side-by-side layout. The declared default now matches what renders.

Try it in the playground

Validation and fallbacks

Every option is type-checked. A wrong type is dropped and the default is used. headerTextPosition must be top, left or right. btnPulsateCount and imgStartIndex must be 0 or greater; imgCount must be greater than 0 (zero means unset). imgPattern without imgCount, or the reverse, is ignored. Unknown keys are ignored.

Warnings are written with console.warn in the readable source. The minified build strips them, so if something is silently falling back, debug against custom404.js rather than custom404.min.js.

autoText phrase pools

Four pools of 50 phrases - 200 in total: page titles, headers, sub-headers and button labels. Each pool is shuffled (Fisher-Yates), drawn without repeats until it is empty, then reshuffled; the remaining queue is stored in localStorage per hostname, so a returning visitor keeps working through the pool. Half of the button labels append your hostname (Back to your-site.com), half stand alone (Beam me up!). When autoText chooses the label it also decides whether the hostname is appended, overriding btnDisplayHostName for that render. Setting subHeaderText: "" counts as set, so the sub-header stays empty.

Page titles 50 phrases

404 - Reality Not Found
404 - Gone Fishing
404 - Plot Twist: No Page
404 - The Void Stares Back
404 - Nope, Not Here
404 - Lost in Cyberspace
404 - Digital Tumbleweeds
404 - Abandon All Hope
404 - Wrong Turn Ahead
404 - The Great Vanishing
404 - Page on Vacation
404 - Ghost Page
404 - Into the Unknown
404 - Off the Map
404 - Down the Rabbit Hole
404 - Page Not Available
404 - Content Missing
404 - Resource Not Found
404 - Page Unavailable
404 - File Not Located
404 - Destination Unknown
404 - Missing Content
404 - Not on This Server
404 - Page Does Not Exist
404 - Link Broken
404 - Nothing Here
404 - Content Removed
404 - Page Relocated
404 - Invalid Address
404 - Document Not Found
404 - Requested Page Missing
404 - Out of Bounds
404 - No Matches Found
404 - Location Not Found
404 - Endpoint Missing
404 - Whoops! Dead End
404 - Well, This Is Awkward
404 - Looks Like a Dead Link
404 - Page Took a Day Off
404 - This Link Needs Coffee
404 - Houston, We Lost a Page
404 - Detour Required
404 - You Zigged, Page Zagged
404 - Turn Back, Traveler
404 - Uncharted Territory
404 - This Page Escaped
404 - Bermuda Triangle of URLs
404 - Warp Zone Malfunction
404 - One Small Step, Wrong URL
404 - The Page Has Left the Building

Headers 50 phrases

Oops! You found a hole in the internet.
This page ran away from home.
Looks like someone moved the furniture.
The page you wanted is playing hide and seek.
Error 404: Enthusiasm not found.
Well, this is embarrassing.
We sent a search party. They got lost too.
Plot twist: the page was inside you all along.
This page called in sick today.
You've reached the edge of the internet.
The hamsters powering this page took a break.
Our digital janitor swept this page away.
This page left to find itself.
Someone unplugged the internet here.
This page is on a coffee break.
Page Not Found
The page you requested could not be found.
This content is no longer available.
We couldn't locate that page.
The requested resource does not exist.
This URL does not match any page on our site.
Sorry, this page doesn't exist.
We can't find the page you're looking for.
The content at this address has been removed.
This page has been moved or deleted.
No page exists at this address.
The link you followed may be outdated.
This destination could not be reached.
Sorry, nothing here.
That page isn't available right now.
The page you're after doesn't live here.
Hmm, we can't seem to find that one.
Looks like this page packed its bags.
This page wandered off somewhere.
Not the page you were hoping for.
Somewhere, somehow, this page went missing.
This content has vanished into thin air.
End of the road. No page ahead.
A wrong turn brought you here.
Nothing to see here. Literally.
404: File Not Found
The resource could not be loaded.
That link appears to be broken.
This path leads nowhere.
Requested content unavailable.
We hit a dead end.
This page seems to have wandered off.
You've ventured into uncharted territory.
The map says the page should be here...
Uh-oh, this page went on an adventure.

Sub-headers 50 phrases

Maybe try the homepage? It's lonely without you.
The good news: everything else still works!
We blame the intern. (Just kidding, we don't have one.)
Even the best explorers take a wrong turn sometimes.
If it helps, we're just as confused as you are.
Fun fact: this page loads faster than the one you wanted.
The page may have been abducted by aliens. We're investigating.
On the bright side, you discovered our 404 page!
This is not the URL you are looking for.
Somewhere a developer is frantically checking the logs.
Quick, look busy while we figure this out.
The page must be on the other internet.
Try turning the URL off and on again.
We'll file a missing page report right away.
Don't worry, it happens to the best of URLs.
The page you're looking for may have been moved or deleted.
Please check the URL and try again.
Use the button below to return to our homepage.
The content at this address is no longer available.
If you followed a link, it may be outdated.
You can navigate back to find what you need.
This page may have been removed during a recent update.
Try searching our site or browse from the homepage.
We apologize for the inconvenience.
The resource you requested could not be located on this server.
Please verify the address and try again.
Return to the homepage to continue browsing.
The URL may contain a typo. Double-check and retry.
This link may have expired or been removed.
We're sorry, but that page isn't here anymore.
Head back and try a different path.
Looks like you need a detour. Try the homepage.
We couldn't match that URL to any content.
Sorry about that! Use the link below to get back on track.
Not to worry, there's plenty more to explore.
This isn't where you meant to be, but we can help.
Our records show this page no longer exists.
It's possible the page was moved to a new location.
Click below to head somewhere that actually exists.
The internet is vast, and you just found an empty spot.
Check your bookmarks, this address may have changed.
Feel free to browse our other pages instead.
We keep things tidy around here, and this page was swept up.
The trail ends here. Let us point you in the right direction.
Happens to everyone. Let's get you back on track.
That page has gone to a better place. Try the homepage.
The server couldn't find what you were after.
No worries! Click the button and we'll take you home.
Sometimes pages just disappear. This was one of them.
Double-check the URL or head to the homepage.

Button labels 50 phrases

Back to + hostname
Return to + hostname
Go back to + hostname
Head back to + hostname
Get back to + hostname
Go to + hostname
Head to + hostname
Navigate to + hostname
Continue to + hostname
Proceed to + hostname
Visit + hostname
Take me to + hostname
Let's go to + hostname
Carry on to + hostname
Hop back to + hostname
Bounce back to + hostname
Jump back to + hostname
Dash back to + hostname
Swing by + hostname
Pop over to + hostname
Cruise back to + hostname
Skip back to + hostname
Zip back to + hostname
Stroll back to + hostname
Find my way to + hostname
Get me outta here!
Go Home
Beam me up!
Abort mission!
Run away!
Panic!
Take me home
I want out!
Back to safety
Retreat!
Let's bounce
Nope, go back
Hit the eject button!
To the homepage!
Help, I'm lost!
Where's the exit?
I'm outta here
Make it stop!
Just go home
Wrong way!
This way out
Rescue me!
Find the exit
Escape!
Eject! Eject! Eject!