Softonic

CSS-kaartgenerator

Stap 1 / 2

Kaarttitel

Dit is een voorbeeld van je kaart.

Volgende

Een kaart is de container achter producttegels, blogvoorbeelden, profielen en dashboardwidgets. Deze generator stijlt die container: kies de achtergrond- en randkleur, de hoekradius, de binnenruimte en een zachte slagschaduw, en bekijk het resultaat direct op de pagina. Het voorbeeld toont tijdelijke inhoud; vervang die door je eigen kop, tekst en acties. Het resultaat is één kant-en-klare CSS-klasse.

Een kaartcontainer stijlen

  1. 1

    Kies de kleuren

    Kies de achtergrondkleur en de randkleur van de kaart.

  2. 2

    Bepaal de vorm

    Kies de hoekradius en de binnenruimte die bij je layout passen.

  3. 3

    Voeg de schaduw toe

    Stel de vervaging en de dekking van de zachte slagschaduw onder de kaart in.

  4. 4

    Bekijk en kopieer

    Controleer het live voorbeeld en kopieer de gegenereerde .card-CSS naar je stylesheet.

Wat de gegenereerde CSS bevat

Het werktuig levert één klasse met de naam .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background is de kleur die je hebt gekozen
  • border is altijd 1 px solid in de gekozen kleur
  • border-radius en padding zijn jouw waarden in px
  • box-shadow gebruikt een vaste verschuiving van 4 px naar beneden met jouw waarden voor vervaging en dekking

Het voorbeeld is tijdelijke inhoud

Het voorbeeld toont een kop en een alinea zodat je de verhoudingen kunt beoordelen. Het werktuig levert zelf geen HTML op: pas de klasse toe op je eigen container en zet daarbinnen je titel, tekst, afbeelding of actieknoppen. Komt de kaart op een gekleurde pagina-achtergrond te staan, controleer dan het contrast van de rand daar, niet alleen in het voorbeeld.

Verstandige grenzen

Negatieve waarden worden op nul begrensd en de dekking van de schaduw blijft tussen 0 en 1. Heel grote waarden voor ruimte of vervaging kunnen onverwachte resultaten geven, dus houd de regelaars binnen de bereiken die je in een echte layout zou gebruiken.

Combineren met je eigen markup

Een minimaal voorbeeld voor jouw pagina:

<div class="card">
  <h3>Productnaam</h3>
  <p>Korte omschrijving</p>
</div>

De containerstijl beperkt de inhoud niet: hij regelt alleen achtergrond, rand, ruimte en schaduw.

Veelgestelde vragen

Nee. Hij levert alleen de CSS-klasse .card. Bouw de markup zelf, bijvoorbeeld een div of article om je kop, tekst en acties heen.

De gegenereerde rand is altijd 1 px solid. Pas de border-regel in de CSS aan als je een andere dikte of stijl nodig hebt.

Een vaste verschuiving van 4 px houdt de schaduw subtiel en leesbaar. Jij bepaalt de zachtheid (vervaging) en de sterkte (dekking).

Nee. De voorbeeldtekst is alleen voor de weergave. De gekopieerde CSS bevat geen inhoud, alleen de containerstijlen.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Willekeurige lettergenerator

Genereer willekeurige A-Z-letters. Kies het aantal, gebruik hoofdletters, kleine letters of gemengd, en gebruik de uitkomst voor spelletjes, opdrachten of lesactiviteiten.