Glazen-overlaymaker
Stel een frosted-glass kaart in – blur, tint, randhighlight, hoekradius en schaduw – voorbeeld zwevend boven een echte geanimeerde achtergrond zodat de blurkwaliteit zichtbaar is in beweging.
🔒 Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
backdrop-filter: blur() is de CSS-eigenschap achter de frosted-glass look – een doorschijnend paneel dat alles wat erachter beweegt vervaagt in plaats van alleen een vlakke kleur te vervagen. Het addertje is dat de blurkwaliteit bijna niet te beoordelen is tegen een statisch staal; het leest alleen als overtuigend zodra er daadwerkelijk iets onder beweegt, zoals op een echte pagina met content, video of een geanimeerde hero. Deze generator plaatst de voorbeeldkaart boven een echt geanimeerde achtergrond in plaats van een stilstaande, zodat wat je ziet tijdens het slepen van de schuifregelaars is wat bezoekers daadwerkelijk zullen ervaren.
De achtergrond is een echte CSS-animatie: een grote linear-gradient geschilderd op 400% van de elementgrootte, met @keyframes die de background-position continu heen en weer bewegen in een loop – geen JavaScript-animatieloop, geen canvas, alleen dezelfde continue background-position techniek die wordt gebruikt in productie-headers. Blur, tintkleur en dekking, randhighlight kleur/dekking/breedte, hoekradius en schaduwzachtheid sturen allemaal de live stijlen van de zwevende kaart aan, en de kopieerbare CSS-box weerspiegelt exact dezelfde waarden.
Niet elke browser ondersteunt backdrop-filter, dus de generator produceert ook een echt @supports not (backdrop-filter: blur(1px)) blok – geen symbolisch gebaar, maar een fallback-regel met een eigen achtergrondkleur berekend op basis van jouw werkelijke tint-dekking. Omdat doorschijnendheid zonder blur er merkbaar slechter uitziet (wat erachter zit schijnt onscherp door), verhoogt de fallback automatisch het alfakanaal boven jouw gekozen tint-dekking, en een opmerking in de gegenereerde CSS legt precies uit waarom en met hoeveel.
Alles wordt berekend en weergegeven in je eigen browser: geen upload, geen account, geen server round-trip. Kopieer de CSS zodra de kaart er goed uitziet, plaats het op elk element dat je boven een foto, video of gradient wilt laten zweven, en behoud het @supports blok zodat oudere browsers nog steeds een leesbare, minder transparante kaart krijgen in plaats van een nauwelijks zichtbare.