Supercharged utility

Combine HTML and CSS into One File

Paste your markup on the left, your styles on the right, and generate a production-ready bundle in seconds. No Wix, no Integromat—just a cleaner workflow powered by Switch Labs.

Ensures valid document structure automatically.
Preserves existing styles and appends new CSS cleanly.
Preview the merged output without leaving the page.

Merge settings

Auto-merge keeps the result up to date while you type. You can still merge manually if you prefer to control the timing.

Auto merge

HTML lines: 22•CSS lines: 51•1726 chars total

HTML input

Paste or write the markup you want to combine. Inline styles are automatically lifted into the unified stylesheet.

CSS input

Add the styles you want merged. Existing style blocks from the HTML are preserved.

.hero {
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  border-radius: 2rem;
  color: #0f172a;
  background: linear-gradient(135deg, #5ff1ba, #d5ffef);
  box-shadow: 0 25px 45px rgba(18, 201, 155, 0.25);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}

.cta-button {
  margin-top: 1.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  border: none;
  font-weight: 600;
  color: white;
  background-color: #12c99b;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(18, 201, 155, 0.35);
}

.features {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.feature {
  padding: 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.feature h2 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

Merged document

We output well-structured HTML with a consolidated style block injected immediately after <head>.

<html>
<head>

<style>
.hero {
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  border-radius: 2rem;
  color: #0f172a;
  background: linear-gradient(135deg, #5ff1ba, #d5ffef);
  box-shadow: 0 25px 45px rgba(18, 201, 155, 0.25);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}

.cta-button {
  margin-top: 1.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  border: none;
  font-weight: 600;
  color: white;
  background-color: #12c99b;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(18, 201, 155, 0.35);
}

.features {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.feature {
  padding: 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.feature h2 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
</style>
</head>
<body><!-- Hero section -->
<section class="hero">
  <h1>Hello, Switch Labs!</h1>
  <p>This is a quick sample of a tidy HTML structure.</p>
  <button class="cta-button">Start building</button>
</section>

<!-- Feature grid -->
<section class="features">
  <article class="feature">
    <h2>Fast</h2>
    <span>Keep production payloads light with optimized markup.</span>
  </article>
  <article class="feature">
    <h2>Flexible</h2>
    <p>Ship experiments without relying on external services.</p>
  </article>
  <article class="feature">
    <h2>Accessible</h2>
    <p>Semantic HTML keeps your users (and search bots) happy.</p>
  </article>
</section>
</body>
</html>

Live preview