CSS-Tools für Designer: Box-Shadow, Border-Radius und mehr

Moderne CSS-Effekte wie Schatten, abgerundete Ecken und Responsive Design sind Standard im Webdesign. Aber die richtige Syntax zu finden kann zeitaufwändig sein. Hier sind die besten Tools, die dir die Arbeit erleichtern.

Box-Shadow Generator

Schatten verleihen Elementen Tiefe und lassen sie vom Hintergrund abheben. Die box-shadow Eigenschaft hat viele Parameter – X-Offset, Y-Offset, Blur, Spread, Farbe, Inset...

Mit dem Box-Shadow Generator erstellst du Schatten visuell:

• Schieberegler für alle Parameter
• Live-Vorschau des Effekts
• Mehrere Schatten kombinieren
• CSS-Code zum Kopieren

/* Beispiel: Moderne Card mit Schatten */
.card {
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.05);
}

Border-Radius Generator

Abgerundete Ecken sind aus dem modernen Webdesign nicht wegzudenken. Mit border-radius kannst du von leicht gerundeten Buttons bis zu komplexen organischen Formen alles erstellen.

Der Border-Radius Generator bietet:

• Einzelne oder alle Ecken anpassen
• Elliptische Radien für komplexe Formen
• Vorschau in Echtzeit
• Fertiger CSS-Code

/* Beispiel: Organische Blob-Form */
.blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Responsive Design testen

Wie sieht deine Website auf verschiedenen Geräten aus? Mit dem Responsive Preview Tool testest du deine Website in verschiedenen Viewport-Größen:

• iPhone, Android, iPad, Desktop
• Eigene Größen definieren
• Hoch- und Querformat

Pixel zu REM umrechnen

Für responsive Typografie und Layouts solltest du relative Einheiten wie REM statt Pixel verwenden. Der Pixel-REM-Rechner konvertiert Werte basierend auf deiner Basis-Schriftgröße.

/* Bei 16px Basis-Schriftgröße */
16px = 1rem
24px = 1.5rem
32px = 2rem

CSS Gradient Generator

Farbverläufe sind ein wichtiges Stilmittel. Der Gradient Generator erstellt lineare und radiale Verläufe mit:

• Beliebig vielen Farbstopps
• Einstellbarem Winkel/Position
• Cross-Browser CSS-Code

Meine Empfehlung: CSS Custom Properties

Speichere häufig verwendete Werte als CSS-Variablen:

:root {
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
}

.card {
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

Konsistente Design-Tokens machen dein CSS wartbarer und dein Design einheitlicher.

Alle CSS-Tools findest du in der DOSIGNY Tools-Sammlung.