CodeKitHubWat is deze tool?
Deze tool combineert een lichtgekleurde en donkergekleurde text-shadow, verschoven in tegenovergestelde richtingen, om de illusie van verhoogde (reliëf) of uitgesneden (gegraveerde) tekst te creëren.
Wissel tussen de stijlen Verhoogd en Gegraveerd, en pas de intensiteitsschuif aan om te bepalen hoe sterk het 3D-effect eruitziet.
Een live preview wordt direct bijgewerkt terwijl je typt of een instelling aanpast, zodat je het effect kunt verfijnen voordat je de CSS kopieert.
Waarom gebruiken?
- Je bouwt een retro Windows 95 of skeuomorfisch UI-thema en hebt die klassieke "in grijs plastic gedrukte" labelstijl nodig zonder handmatig shadow-offsets af te stellen in dev tools.
- Je ontwerpt een badge of prestatie-icoon en wilt dat de tekst gestempeld of gegraveerd lijkt in een metaalachtige achtergrond in plaats van er plat bovenop te liggen.
- Een ontwerper gaf je een mockup met een reliëfkop en geen CSS — recreëer het effect hier in plaats van shadow-waarden te raden via trial-and-error.
- Je wilt een old-school "in steen gehouwen" of letterpress-look voor een logo of hero-titel zonder een beeldbewerker of SVG-filter erbij te pakken.
- Je prototypeert meerdere intensiteitsniveaus naast elkaar om te zien hoe subtiel versus dramatisch het 3D-effect moet zijn voordat je een definitief ontwerp vastlegt.
- 100% lokaal: de CSS wordt volledig in je browser gegenereerd, er wordt niets naar een server gestuurd.
Hoe te gebruiken
- Typ de tekst die je wilt stylen.
- Kies Verhoogd (reliëf) of Gegraveerd (uitgesneden) uit de stijlselector.
- Pas de intensiteitsschuif aan en kies een achtergrond- en tekstkleur die bij je ontwerp past.
- Klik op "Kopieer" om de gegenereerde CSS-code te kopiëren en plak hem in je stylesheet.
Voorbeeld
Invoer
Tekst: "Reliëf", Stijl: Verhoogd, Intensiteit: 2Uitvoer
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);De gegenereerde CSS stelt de tekstkleur, achtergrondkleur, en een text-shadow met twee lagen in die het verhoogde of uitgesneden effect creëert.
Hoe het effect werkt
De reliëf- en graveereffecten zijn opgebouwd uit twee verschoven text-shadow-lagen met tegenovergestelde lichte en donkere kleuren.
| Eigenschap | Doel |
|---|---|
| Lichte schaduw (rgba(255,255,255,0.7)) | Simuleert een lichtbron die één rand van de tekst raakt |
| Donkere schaduw (rgba(0,0,0,0.5)) | Simuleert een schaduw die op de tegenoverliggende rand valt |
| Verschuivingsrichting | Omgekeerd tussen Verhoogd en Gegraveerd om de 3D-illusie om te draaien |
| Intensiteit | Bepaalt hoe ver de lichte en donkere schaduwen ten opzichte van de tekst verschoven zijn |
| Overeenkomende kleuren | Tekst- en achtergrondkleur dicht bij elkaar gezet om plat contrast te verbergen |
Waar reliëf- en graveertekst het best werkt
- Sectiekoppen en labels op een egale kaart of paneel, waar het subtiele 3D-effect textuur toevoegt zonder met de inhoud te concurreren.
- Badges, zegels, en prestatie-iconen, waar een gestempelde of gegraveerde look het gevoel van iets officieels of verdiends versterkt.
- Retro of skeuomorfische UI-thema's (old-school OS-chrome, reliëfknoppen) waar het effect deel is van de ontwerptaal in plaats van een eenmalig accent.
- Vermijd het bij kleine bodytekst of lange paragrafen — het effect is afhankelijk van dichtbijeenliggende tekst/achtergrondkleuren, wat de gewone leesbaarheid schaadt bij kleine formaten.
Gerelateerde tools
Voor meer CSS-generators, probeer deze.
→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator
Veelgestelde vragen
Wat is het verschil tussen Verhoogd en Gegraveerd?
Verhoogd laat de tekst lijken alsof hij uit de achtergrond omhoog komt, met de lichte schaduw linksboven en de donkere schaduw rechtsonder. Gegraveerd keert dit om, waardoor de tekst lijkt alsof hij in de achtergrond is uitgesneden.
Waarom ziet het effect er het best uit met een gelijkende tekst- en achtergrondkleur?
De reliëf/gravure-illusie berust volledig op de schaduw-hooglichten en -schaduwen, niet op contrast tussen tekst en achtergrond — dus de tekstkleur dicht bij (of gelijk aan) de achtergrondkleur zetten geeft meestal het schoonste resultaat.
Kan ik dit effect op elk element toepassen, niet alleen tekst?
De text-shadow eigenschap die deze tool genereert werkt alleen op tekst. Voor een vergelijkbaar effect op vormen of knoppen heb je in plaats daarvan een vergelijkbare box-shadow-opzet nodig.
Bewaart of volgt deze tool wat ik typ?
Nee. De CSS wordt volledig in je browser gegenereerd — er wordt niets naar een server gestuurd of opgeslagen.
Werkt dit in alle browsers?
Ja — text-shadow wordt uitstekend ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari, en Edge.
Waarom verdwijnt of ziet het reliëfeffect er verkeerd uit op een donkere achtergrond?
De lichte schaduwlaag is afhankelijk van opvallen tegen een lichter oppervlak — op een zeer donkere achtergrond kan het witte hooglicht uitwassen of omgekeerd ogen van wat je verwacht. Probeer tekst en achtergrond te wisselen naar een middengrijs, of verhoog de dekking van de lichte schaduw, om de 3D-illusie leesbaar te houden op donkere thema's.
Kan ik het reliëfeffect animeren of laten overgaan bij hover?
Ja — text-shadow is animeerbaar met een CSS-transitie, dus je kunt soepel overgaan van een platte staat naar reliëf (of tussen intensiteiten van Verhoogd en Gegraveerd) bij :hover of :focus. Kopieer de gegenereerde schaduwwaarde als je "hover"-staat en combineer het met een transition: text-shadow 0.2s ease;-regel op het basiselement.
Beïnvloedt de intensiteitsschuif de prestaties bij grote hoeveelheden tekst?
Nee — text-shadow is een lichtgewicht CSS-eigenschap ongeacht de intensiteit, aangezien het gewoon twee schaduwlagen zijn die op dezelfde manier worden berekend of de offset nu 1px of 6px is. Het is veilig te gebruiken op koppen, knoppen, of bodytekst zonder zorgen over renderprestaties.
Hoe zorg ik dat het effect er goed uitziet met een aangepast lettertype in plaats van het standaardlettertype?
De reliëf/gravure-illusie leest meestal het duidelijkst bij vette, dikke letterstrepen, omdat er meer oppervlak is voor de schaduwverschuiving om licht en schaduw op te vangen. Dunne of lichte lettertypes kunnen het effect vaag of ruizig laten lijken — als je aangepaste lettertype onduidelijk oogt, probeer dan een zwaarder font-weight of verhoog de intensiteitsschuif een beetje om te compenseren.
Kan ik twee andere kleuren gebruiken in plaats van wit/zwart voor de lichte en donkere schaduwen?
De gegenereerde CSS is een startpunt dat je vrij kunt aanpassen — verwissel de waarden rgba(255,255,255,...) en rgba(0,0,0,...) voor elk kleurenpaar zodra je de code hebt gekopieerd, bijvoorbeeld een warm gouden hooglicht en een donkerbruine schaduw voor een bronzen-plaquette-look in plaats van het standaard grijze metaaleffect.