Kostenlos · Ohne Anmeldung · Ohne Cookies

Für Website-Betreiber und Entwickler

Brutto-Netto-Rechner als Widget einbinden

Der Gehaltsrechner von Gehalts.info für Ihre eigene Website: ein Code-Snippet, in zwei Minuten eingebunden, responsiv, mit automatischer Höhenanpassung und immer auf dem aktuellen Rechenstand.

Zuletzt aktualisiert: 18. August 2026

Live-VorschauGenau so erscheint es eingebunden

Brutto-Netto-Rechner

Steuerjahr 2026 · vereinfachte Berechnung

Bruttogehalt (pro Monat)

€

Zeitraum

Steuerklasse

Bundesland

Steuerjahr

Krankenversicherung

Zusatzbeitrag (%)

Alter

Kirchensteuer

Kinder

Ihr Nettogehalt pro Monat

2.609 €

≈ 31.310 € pro Jahr

Netto-Quote

65,2 %

Abzüge im DetailAnzeigen

Bruttogehalt4.000,00 €

Lohnsteuer− 520,83 €

Krankenversicherung− 350,00 €

Pflegeversicherung− 96,00 €

Rentenversicherung− 372,00 €

Arbeitslosenvers.− 52,00 €

Nettogehalt2.609,17 €

Arbeitgeber-Gesamtkosten /Monat4.846,00 €

Vereinfachte Beispielrechnung zur Veranschaulichung – keine verbindliche steuerliche oder rechtliche Auskunft. Maßgeblich ist die offizielle Abrechnung.

Gehaltsrechner powered by gehalts.info

Einbettungscode

<div class="gehalts-widget" data-calc="brutto-netto">
  <div data-gehalts-attribution="1">Gehaltsrechner powered by <a href="https://gehalts.info/rechner/brutto-netto-rechner">gehalts.info</a></div>
</div>
<script async src="https://gehalts.info/widget/brutto-netto-rechner.js"></script>

Maximal 640 px breit, Aufschlüsselung eingeklappt.

1Code-Snippet kopieren — Kopieren Sie den Einbettungscode. Er besteht aus einem Container-div mit dem Attributionshinweis und einem script-Tag.
2An der gewünschten Stelle einfügen — Fügen Sie das Snippet dort in Ihr HTML ein, wo der Rechner erscheinen soll — im Beitrag, im Template oder in einem HTML-Widget-Bereich.
3Seite speichern und prüfen — Der Rechner lädt sich selbst, passt seine Höhe an und ist sofort einsatzbereit. Der Hinweislink muss sichtbar bleiben.

Eine Bedingung: der Hinweis bleibt sichtbar

Der Hinweis „Gehaltsrechner powered by gehalts.info“ mit Link muss sichtbar beim Rechner stehen. Das Widget prüft das laufend selbst und deaktiviert sich, wenn der Hinweis entfernt oder versteckt wird.

Warum dieses Widget

Was Sie bekommen — und was Sie sich sparen

Ein Snippet, kein Build-Schritt

Ein div plus ein script-Tag. Kein npm-Paket, kein Framework, keine Änderung an Ihrem Build-Prozess.

Ohne Cookies und Tracking

Das Widget setzt keine Cookies, liest keinen Local Storage und verarbeitet keine Eingaben serverseitig.

Asynchron und lazy geladen

Das Skript lädt async, der iframe mit loading="lazy". Ihr Largest Contentful Paint bleibt unberührt.

Rechenstand immer aktuell

Steuertarif, Beitragssätze und Bemessungsgrenzen pflegen wir. Ihre Einbindung zieht automatisch nach.

Automatische Höhe

Der Rechner meldet seine Inhaltshöhe per postMessage zurück — keine fixen Pixelwerte, kein Innenscrollen.

Dauerhaft kostenlos

Keine Anmeldung, keine Domain-Freischaltung, kein Aufruflimit. Nur der sichtbare Hinweislink ist Pflicht.

Eine eigene Brutto-Netto-Berechnung zu bauen klingt nach einem Nachmittag Arbeit und ist in Wirklichkeit eine Daueraufgabe: Der Programmablaufplan für den Lohnsteuerabzug ändert sich jährlich, dazu kommen neue Beitragsbemessungsgrenzen, ein wechselnder durchschnittlicher Zusatzbeitrag sowie Anpassungen beim Pflegeversicherungssatz und bei den Kinderfreibeträgen. Das Widget nimmt Ihnen genau diese Pflege ab — Sie binden es einmal ein, der Rechenstand bleibt aktuell.

Konfiguration

Optionen am Container-Element

Gesteuert wird das Widget über Attribute am Container-div — kein Konfigurationsobjekt, keine Initialisierungsfunktion. Alle Optionen sind freiwillig, das Standard-Snippet funktioniert ohne sie.

Attribut	Werte	Standard	Wirkung
`data-calc`	"brutto-netto"	erforderlich	Wählt den einzubindenden Rechner aus. Aktuell steht der Brutto-Netto-Rechner zur Verfügung.
`data-max-width`	Zahl in px, "none"	640	Maximale Renderbreite. "none" lässt das Widget die volle Breite des umgebenden Containers nutzen — passend für breite Artikelspalten ebenso wie für schmale Sidebars.
`data-open`	"1"	eingeklappt	Klappt die Abzugstabelle unter dem Ergebnis von Anfang an auf. Standardmäßig zeigt das Widget nur Eingaben und Nettoergebnis und bleibt damit kompakt.

Schritt für Schritt

Einbindung in Ihrem CMS

Überall dort, wo Sie eigenen HTML-Code einfügen dürfen, funktioniert das Widget. Der einzige verbreitete Stolperstein sind Editoren und Sicherheits-Plugins, die <script>-Tags beim Speichern entfernen.

WordPress

Im Block-Editor einen Block „Individuelles HTML“ einfügen und das Snippet hineinkopieren. Im Classic Editor auf den Reiter „Text“ wechseln. Für Sidebar oder Footer: Design → Widgets → Individuelles HTML. Ein Plugin ist nicht nötig. Beachten Sie: Manche Sicherheits- und Caching-Plugins entfernen <script>-Tags beim Speichern — binden Sie das Snippet dann über das Theme-Template oder ein Code-Snippet-Plugin ein.

TYPO3

Ein Inhaltselement vom Typ „Reiner HTML-Code“ anlegen und das Snippet einfügen. Alternativ per TypoScript direkt im Template ausgeben.

Joomla

Im Beitragseditor den Quellcode-Modus aktivieren („Code bearbeiten“ bzw. der TinyMCE-Umschalter) und das Snippet einfügen. Prüfen Sie in den Editor-Einstellungen, dass <script>-Tags nicht gefiltert werden. Für Modulpositionen eignet sich ein Modul vom Typ „Eigener Code“.

Wix

Über Hinzufügen → Einbetten → HTML einbetten ein Embed-Element platzieren und den Code im Modus „Code“ einfügen. Wix rendert Embeds seinerseits in einem iframe mit fester Höhe: Stellen Sie die Elementhöhe dort manuell auf etwa 760 px ein (rund 1260 px mit data-open="1"), da die automatische Höhenmeldung nicht bis zur Wix-Seite durchgereicht wird.

Webflow

Ein Embed-Element aus dem Add-Panel ziehen und das Snippet einfügen. Auf der veröffentlichten Domain funktioniert das Widget vollständig; im Designer-Canvas wird der iframe nicht ausgeführt.

Squarespace und Jimdo

Squarespace: Block „Code“ hinzufügen (in den Business-Tarifen verfügbar) und das Snippet einfügen. Jimdo: Element „Widget/HTML“ verwenden.

Shopify

Im Theme-Editor eine Sektion vom Typ „Custom Liquid“ ergänzen oder das Snippet direkt in ein Template unter sections/ einfügen. Im Shop-Blog passt das Widget gut zu Karriere- und Gehaltsthemen.

HubSpot, Drupal und Contao

HubSpot: Modul „Rich Text“ im Quellcode-Modus oder ein eigenes HTML-Modul. Drupal: Textformat „Full HTML“ wählen, sonst filtert Drupal das Skript heraus. Contao: Inhaltselement „HTML“.

React, Vue, Next.js und andere SPAs

Das Container-Markup ganz normal rendern und das Skript einmalig laden — in Next.js etwa über next/script mit strategy="afterInteractive". Der Loader beobachtet das DOM und initialisiert auch Container, die erst nach dem ersten Rendern erscheinen. Tabs, Akkordeons und Routenwechsel funktionieren damit ohne Zusatzcode.

Technik

Technische Daten

EinbindungContainer-div plus async geladenes script; der Rechner selbst läuft in einem iframe von gehalts.info

Skriptgrößerund 5 KB unkomprimiert, keine externen Abhängigkeiten, kein jQuery

Ladeverhaltenscript async, iframe loading="lazy" — kein Render-Blocking, kein Einfluss auf den LCP Ihrer Seite

iframe-Sandboxallow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox

KommunikationpostMessage zwischen Host-Seite und iframe — Höhenmeldung und Prüfung des Attributionslinks

ResponsiveBreite 100 % des Containers bis zum Maximum; das Feldraster bricht unterhalb von 640 px einspaltig um

Browseralle aktuellen Browser inklusive Safari und Firefox; ohne JavaScript bleibt der Hinweislink sichtbar

AktualisierungAuslieferung mit 5 Minuten Cache-Lebensdauer — Änderungen erreichen alle Einbindungen ohne Ihr Zutun

Content-Security-Policy

Setzt Ihre Seite eine CSP, brauchen Skript und iframe eine Freigabe für gehalts.info. Zwei Direktiven genügen:

script-src 'self' https://gehalts.info;
frame-src 'self' https://gehalts.info;

Weitere Freigaben sind nicht nötig: Der Rechner lädt keine externen Bilder und keine Drittanbieter-Fonts in Ihre Seite und stellt keine Netzwerk-Anfragen an andere Hosts. Die Kommunikation zwischen Ihrer Seite und dem iframe läuft ausschließlich über postMessage mit fest gesetztem Ziel-Origin.

Datenschutz und DSGVO

Der Rechner arbeitet vollständig im Browser Ihrer Besucher. Eingegebenes Gehalt, Steuerklasse oder Kinderzahl verlassen das Gerät nicht — es gibt keinen Berechnungs-Endpunkt, an den etwas gesendet würde.

Keine Cookies, kein Local Storage, kein Session Storage.
Kein Werbe- oder Analyse-Tracking innerhalb des Widgets.
Keine Übermittlung von Eingaben an gehalts.info oder Dritte.
Beim Laden des iframes fällt — wie bei jeder eingebundenen Ressource — die IP-Adresse in unseren Server-Logs an. Sie wird ausschließlich zur Auslieferung verwendet.

Ein kurzer Hinweis in Ihrer Datenschutzerklärung auf die eingebundenen Inhalte von gehalts.info ist üblich. Ein Consent-Banner halten wir mangels Cookies und Endgeräte-Zugriff nicht für erforderlich; das ist unsere Einschätzung und keine Rechtsberatung.

Einsatzbereiche

Für wen sich der Rechner besonders lohnt

Steuerberater und Lohnbüros

Erstberatung entlasten: Mandanten rechnen Szenarien selbst durch, bevor sie zum Hörer greifen.

Jobbörsen und Karriereportale

Stellenanzeigen mit Bruttoangabe um eine Netto-Einordnung ergänzen.

Personalberatung und Recruiting

Kandidaten das Angebot netto zeigen — einer der häufigsten Gründe für Rückfragen im Prozess.

Gewerkschaften und Betriebsräte

Tarifergebnisse greifbar machen: Was kommt von der Erhöhung tatsächlich an?

Finanz- und Karriereblogs

Ein interaktives Element, das Verweildauer erzeugt, statt statischer Beispieltabellen.

HR-Software und Intranets

Self-Service im Mitarbeiterportal, ohne eigene Lohnsteuerlogik zu pflegen und jährlich nachzuziehen.

Support

Fehlerbehebung

Das Widget erscheint gar nicht

Prüfen Sie der Reihe nach: (1) Sind die Klasse gehalts-widget und das Attribut data-calc="brutto-netto" im ausgelieferten HTML angekommen — viele CMS filtern Attribute heraus? (2) Lädt https://gehalts.info/widget/brutto-netto-rechner.js im Netzwerk-Tab mit Status 200? (3) Blockiert eine Content-Security-Policy Skript oder iframe (siehe Abschnitt zur CSP)? (4) Hält ein Consent-Tool das Skript zurück, das alle Drittanbieter-Skripte pauschal blockiert?

Es erscheint „Dieses Rechner-Widget benötigt eine sichtbare Verlinkung“

Der Attributionshinweis ist nicht auffindbar oder nicht sichtbar. Die häufigsten Ursachen: Der Editor hat das <div data-gehalts-attribution> beim Speichern entfernt, ein Theme setzt den Link auf display:none oder auf eine sehr kleine Schriftgröße, oder ein Skript ersetzt das Linkziel. Fügen Sie den Einbettungscode unverändert erneut ein.

Die Höhe passt nicht oder es erscheint ein Scrollbalken

Die Höhenmeldung läuft über postMessage. Wird sie blockiert — etwa weil ein Sicherheits-Plugin message-Events abfängt oder das Widget in einem fremden iframe mit fester Höhe steckt (Wix, manche Newsletter-Tools) — bleibt die Starthöhe stehen. Setzen Sie dann die Höhe des äußeren Containers manuell und achten Sie darauf, dass er kein overflow:hidden mit fixer Höhe erbt.

Der Rechner wird zu schmal dargestellt

Standardmäßig ist das Widget auf 640 px Breite begrenzt. In breiten Layouts setzen Sie data-max-width="none" für die volle Containerbreite oder einen eigenen Pixelwert. Umgekehrt bricht das Feldraster unterhalb von 640 px automatisch einspaltig um und bleibt so auch in schmalen Sidebars lesbar.

Kann ich nur den iframe ohne das Skript einbinden?

Nein, und das ist Absicht. Der Rechner im iframe schaltet sich erst frei, wenn das Loader-Skript auf Ihrer Seite bestätigt, dass der Attributionshinweis vorhanden und sichtbar ist. Ein handgeschriebener <iframe> ohne Skript erhält diese Bestätigung nie und zeigt nach wenigen Sekunden den Hinweis auf die fehlende Verlinkung.

Mehrere Rechner auf einer Seite

Funktioniert. Legen Sie einfach mehrere Container an; das Skript wird nur einmal benötigt und initialisiert jeden Container separat. Jede Instanz rechnet unabhängig von den anderen.

Nutzungsbedingungen

Lizenz und Attribution

Sie dürfen das Widget kostenlos und unbefristet auf beliebig vielen Websites einsetzen — privat wie gewerblich, auch in Kundenprojekten und hinter einem Login. Im Gegenzug gilt eine einzige Bedingung: Der Hinweis „Gehaltsrechner powered by gehalts.info“ mit funktionierendem Link muss sichtbar beim Rechner stehen.

Nicht gestattet

Den Hinweis entfernen, überdecken oder per CSS unsichtbar machen.
Den Attributionslink auf eine andere Adresse umleiten oder mit nofollow entwerten.
Den Rechner als eigenes Produkt ausgeben oder unter fremder Marke weiterverkaufen.

Warum die Prüfung eingebaut ist

Der sichtbare Link ist die Gegenleistung dafür, dass Pflege und Aktualisierung der Berechnung bei uns liegen. Deshalb prüft das Widget selbst, ob der Hinweis vorhanden und sichtbar ist, und schaltet sich andernfalls ab. Wird der Hinweis wiederhergestellt, läuft der Rechner sofort weiter — eine erneute Einbindung ist nicht nötig.

Fragen oder ein Rechner-Wunsch?

Fehlt Ihnen ein bestimmter Rechner als Widget oder brauchen Sie eine Einbindung ohne Attribution? Schreiben Sie uns — wir melden uns.

Häufige Fragen zum Gehaltsrechner-Widget

Was kostet die Einbindung des Widgets?

Nichts. Das Widget ist dauerhaft kostenlos nutzbar, solange der Hinweis „Gehaltsrechner powered by gehalts.info“ inklusive Link sichtbar bleibt. Es gibt keine Aufruflimits, keine Anmeldung und keine kostenpflichtige Variante mit mehr Funktionen.

Muss ich eine Domain freischalten lassen?

Nein. Das Skript lässt sich ohne Anmeldung oder Freigabe auf jeder Website einbinden — einfach den Code-Schnipsel einfügen. Auch auf Testumgebungen, localhost und Staging-Systemen funktioniert es unverändert.

Setzt das Widget Cookies oder verarbeitet es personenbezogene Daten?

Nein. Der Rechner setzt keine Cookies und speichert nichts im Local Storage. Die Berechnung läuft vollständig im Browser Ihrer Besucher — eingegebene Gehälter werden nicht an einen Server übertragen und nicht gespeichert. Beim Laden des iframes fällt wie bei jeder eingebundenen Ressource die IP-Adresse in unseren Server-Logs an; sie wird ausschließlich zur Auslieferung verwendet.

Muss ich das Widget in meiner Datenschutzerklärung erwähnen?

Da beim Laden des iframes eine Verbindung zu gehalts.info aufgebaut wird, ist ein kurzer Hinweis in der Datenschutzerklärung üblich und empfehlenswert — vergleichbar mit anderen eingebundenen Inhalten. Ein Consent-Banner ist nach unserer Einschätzung nicht erforderlich, weil das Widget keine Cookies setzt und keine Informationen aus dem Endgerät ausliest. Diese Einschätzung ersetzt keine Rechtsberatung; prüfen Sie im Zweifel mit Ihrem Datenschutzbeauftragten.

Passt sich die Höhe des Widgets automatisch an?

Ja. Das Widget meldet seine Inhaltshöhe per postMessage an die einbindende Seite zurück, auch wenn Besucher die Abzugstabelle auf- oder zuklappen. Ein fester Höhenwert ist nicht nötig.

Warum ist die Abzugstabelle standardmäßig eingeklappt?

Damit das Widget in eine normale Inhaltsspalte passt. Sichtbar sind die Eingabefelder und das Nettoergebnis; die vollständige Aufschlüsselung mit Lohnsteuer, Solidaritätszuschlag, Kirchensteuer und allen Sozialabgaben öffnen Besucher per Klick. Wer sie sofort zeigen möchte, setzt data-open="1" am Container.

Funktioniert das Widget mit WordPress und anderen CMS?

Ja. Der Code-Schnipsel besteht aus reinem HTML und JavaScript und lässt sich in jedes CMS einfügen, das eigenen HTML-Code erlaubt — WordPress, TYPO3, Joomla, Drupal, Contao, Webflow, Wix, Squarespace, Shopify und HubSpot eingeschlossen. Die Schritte je System stehen weiter oben auf dieser Seite.

Beeinflusst das Widget meine Core Web Vitals?

Kaum. Das Loader-Skript ist rund 5 KB groß und wird async geladen, der iframe mit loading="lazy" — beides blockiert das Rendering Ihrer Seite nicht. Gegen Layout Shift reserviert der iframe von Anfang an eine Starthöhe, die der eingeklappten Ansicht entspricht.

Welchen Rechenstand nutzt das Widget?

Denselben wie der Rechner auf gehalts.info: Lohnsteuer nach dem amtlichen Programmablaufplan, aktuelle Beitragssätze und Beitragsbemessungsgrenzen, wahlweise die Steuerjahre 2023 bis 2026. Änderungen pflegen wir zentral, Ihre Einbindung zieht ohne Ihr Zutun nach.

Ist der Attributionslink ein Follow-Link?

Ja. Der Link wird ohne nofollow-Attribut ausgeliefert, zeigt auf die Seite des Brutto-Netto-Rechners und trägt den Ankertext „gehalts.info“.

Was passiert, wenn ich den Hinweis entferne?

Das Widget prüft fortlaufend, ob der Hinweis sichtbar vorhanden ist. Wird er entfernt oder per CSS versteckt, deaktiviert sich der Rechner automatisch und zeigt stattdessen eine Meldung. Wird der Hinweis wiederhergestellt, funktioniert der Rechner sofort wieder — eine erneute Einbindung ist nicht nötig.

Darf ich das Widget auf kommerziellen Seiten einsetzen?

Ja, auch auf gewerblichen Websites, in Kundenprojekten und hinter einem Login. Nicht gestattet ist, den Rechner ohne den sichtbaren Hinweis auszuliefern, ihn als eigenes Produkt auszugeben oder den Attributionslink umzuleiten.

Gibt es weitere Rechner als Widget?

Aktuell ist der Brutto-Netto-Rechner als Widget verfügbar. Weitere Rechner — etwa für Teilzeit, Überstunden und Firmenwagen — bereiten wir vor. Schreiben Sie uns gern, welcher Rechner Ihnen fehlt.

Erst ausprobieren, dann einbinden

Der vollständige Rechner mit Erklärungen zu allen Abzügen — die Seite, auf die auch der Attributionslink zeigt.

Zum Brutto-Netto-Rechner