About this snippet

Retain visitors even when they hit a dead end with this visually appealing 404 page. It features large, bold typography and a clear call-to-action button, which guides users back to your homepage immediately.

Size
1.2 KB
Uses
HTML, CSS
Loads
Nothing external
Views
306

Collections

Related snippets

<div class="error-container">
  <div class="error-code">404</div>
  <h1>Page Not Found</h1>
  <p>Sorry, we couldn&#39;t find the page you&#39;re looking for. It might have been moved or deleted.</p>
  <a href="/" class="home-link">Go Back Home</a>
</div>
.error-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: center;
  padding: 80px 20px;
  background: #ffffff;
  color: #1f2937;
}
.error-code {
  font-size: 8rem;
  font-weight: 900;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 20px;
}
.error-container h1 {
  font-size: 2rem;
  margin: 0 0 15px 0;
  color: #111827;
}
.error-container p {
  color: #6b7280;
  max-width: 400px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}
.home-link {
  display: inline-block;
  background: #111827;
  color: #fff;
  padding: 14px 30px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.home-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save