Base64 Encoder / Decoder
Kodiere und dekodiere Text in Base64 – direkt im Browser. Unterstützt vollständig UTF-8, erkennt ungültigen Input und gibt sofort Feedback. Ideal für API-Tokens, Daten-URIs und E-Mail-Header.
/* ===== Base64 Encoder/Decoder – Light Theme (servit.dev) ===== */
.sd-base64{
--t-primary: #008fbf;
--t-bg: transparent;
--t-fg: #0f172a;
--t-muted: #4b5563;
--t-border: #e5e7eb;
--t-surface: #ffffff;
--t-surface-2: #f0f2f7;
--t-code: #1e293b;
--t-code-border: #e5e7eb;
--t-error-bg: #fef2f2;
--t-error: #dc2626;
--t-radius: 12px;
--t-pad: 16px;
font-family: inherit;
color: var(--t-fg);
background: var(--t-bg);
border: none;
border-radius: 0;
padding: 0;
width: 100%;
max-width: 100%;
margin: 0;
box-shadow: none;
}
.sd-base64 .sd-b64__row{display:flex;gap:10px;align-items:center}
.sd-base64 .sd-b64__controls{flex-wrap:wrap;margin-bottom:20px;gap:8px}
.sd-base64 .sd-b64__spacer{flex:1}
.sd-base64 button.sd-b64__btn{
padding:7px 16px;border:1px solid var(--t-border) !important;border-radius:8px;
background:var(--t-surface) !important;color:var(--t-fg) !important;cursor:pointer;
font-size:13px;font-weight:500;line-height:1.4;
box-shadow:none !important;text-transform:none;letter-spacing:0;
transition:all .15s ease;
}
.sd-base64 button.sd-b64__btn:hover{
border-color:var(--t-primary) !important;
color:var(--t-primary) !important;
background:rgba(0,143,191,.04) !important;
}
.sd-base64 button.sd-b64__btn:active{transform:translateY(1px)}
.sd-base64 button.sd-b64__btn.sd-b64__btn--primary{
background:var(--t-primary) !important;
border-color:var(--t-primary) !important;
color:#ffffff !important;
}
.sd-base64 button.sd-b64__btn.sd-b64__btn--primary:hover{
background:#2fbfef !important;
border-color:#2fbfef !important;
color:#ffffff !important;
}
.sd-base64 button.sd-b64__btn.sd-b64__btn--ghost{
background:transparent !important;border-color:transparent !important;color:var(--t-muted) !important;
}
.sd-base64 button.sd-b64__btn.sd-b64__btn--ghost:hover{
color:var(--t-primary) !important;background:transparent !important;border-color:transparent !important;
}
.sd-base64 .sd-b64__panes{align-items:stretch}
.sd-base64 .sd-b64__pane{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px}
.sd-base64 .sd-b64__panehead{font-size:12px;font-weight:600;color:var(--t-muted);letter-spacing:.02em;text-transform:uppercase}
.sd-base64 textarea.sd-b64__textarea{
width:100%;min-height:340px;resize:vertical;padding:var(--t-pad);
border-radius:var(--t-radius);border:1px solid var(--t-border) !important;
background:var(--t-surface) !important;color:var(--t-fg) !important;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:13px;line-height:1.6;box-shadow:none !important;
transition:border-color .2s ease;
}
.sd-base64 textarea.sd-b64__textarea:focus{border-color:var(--t-primary) !important;outline:none}
.sd-base64 .sd-b64__error{
margin-top:12px;padding:12px 16px;border-radius:var(--t-radius);
background:var(--t-error-bg);color:var(--t-error);font-size:14px;
border:1px solid rgba(220,38,38,.12)
}
/* Mobile */
@media (max-width: 768px){
.sd-base64 button.sd-b64__btn{padding:7px 12px}
.sd-base64 textarea.sd-b64__textarea{min-height:220px}
.sd-base64 .sd-b64__panes{flex-direction:column}
}
(function(){
var $=function(sel,root){return(root||document).querySelector(sel)};
var root=document.getElementById('sd-base64');if(!root)return;
var el={
input:$('#sdb64-input',root),
output:$('#sdb64-output',root),
error:$('#sdb64-error',root),
btnEnc:$('#sdb64-encode',root),
btnDec:$('#sdb64-decode',root),
btnCopy:$('#sdb64-copy',root),
btnClr:$('#sdb64-clear',root)
};
function showError(msg){el.error.textContent=msg;el.error.hidden=false}
function clearError(){el.error.hidden=true;el.error.textContent=''}
function utf8ToBase64(str){
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,function(_m,p1){
return String.fromCharCode(parseInt(p1,16));
}));
}
function base64ToUtf8(b64){
return decodeURIComponent(
Array.prototype.map.call(atob(b64),function(c){
return '%'+('00'+c.charCodeAt(0).toString(16)).slice(-2);
}).join('')
);
}
function doEncode(){
clearError();
var raw=el.input.value;
if(!raw){el.output.value='';return}
try{
el.output.value=utf8ToBase64(raw);
}catch(e){
showError('Encoding-Fehler: '+e.message);
}
}
function doDecode(){
clearError();
var raw=el.input.value.trim();
if(!raw){el.output.value='';return}
try{
el.output.value=base64ToUtf8(raw);
}catch(e){
showError('Ungültiger Base64-String: '+e.message);
}
}
function copyOutput(){
var text=el.output.value;
if(!text)return;
if(navigator.clipboard){navigator.clipboard.writeText(text);return}
var ta=document.createElement('textarea');
ta.value=text;
document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove();
}
el.btnEnc.addEventListener('click',doEncode);
el.btnDec.addEventListener('click',doDecode);
el.btnCopy.addEventListener('click',copyOutput);
el.btnClr.addEventListener('click',function(){
el.input.value='';el.output.value='';clearError();
});
el.input.addEventListener('keydown',function(ev){
if((ev.ctrlKey||ev.metaKey)&&ev.key==='Enter')doEncode();
});
})();
Input
Output
Mit unserem kostenlosen Base64-Tool kodierst und dekodierst du Texte in Sekundenschnelle. Base64-Encoding wird überall eingesetzt: in API-Authentifizierung, Data-URIs, E-Mail-Headern und JWT-Tokens. Unser Tool unterstützt vollständiges UTF-8, sodass auch Umlaute, Emojis und Sonderzeichen korrekt verarbeitet werden. Ungültige Base64-Eingaben werden sofort erkannt. Deine Daten bleiben lokal in deinem Browser – nichts wird an einen Server gesendet.