Generátor CSS Box Shadow a Border Radius

Generátor stínů a poloměrů ohraničení rámečku CSS

🎨 Bezplatný generátor CSS box-shadow a border-radius s živým náhledem. Vytvářejte krásné stíny, zaoblené rohy a moderní UI efekty. Kód připravený ke kopírování a vložení pro webdesign.

Vlastnost Box Shadow

Vlastnost CSS box-shadow přidává stínové efekty kolem rámečku prvku. Můžete nastavit více efektů oddělených čárkami. Stín se popisuje posunem X a Y vůči prvku, poloměrem rozostření a roztažení a barvou.

Syntaxe: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Parametry stínu

• X-Offset (vodorovně): Kladné hodnoty posunou stín doprava, záporné doleva
• Y-Offset (svisle): Kladné hodnoty posunou stín dolů, záporné nahoru
• Poloměr rozostření: Vyšší hodnoty vytvářejí větší rozostření. 0 znamená ostrý stín
• Poloměr roztažení: Kladné hodnoty stín zvětšují, záporné zmenšují
• Barva: Libovolná hodnota barvy v CSS (hex, rgb, rgba, hsl)
• Inset: Změní stín na vnitřní místo vnějšího

Vlastnost Border Radius

Vlastnost border-radius zaobluje rohy vnějšího okraje rámečku prvku. Můžete nastavit jeden poloměr pro kruhové rohy, nebo dva poloměry pro eliptické rohy.

Syntaxe: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Běžné použití

• Karty: Jemný stín (0 4px 6px rgba(0,0,0,0.1)) se středním poloměrem (8px)
• Tlačítka: Barevný stín ladící s barvou tlačítka pro efekt hloubky
• Modální okna: Velký stín (0 20px 25px rgba(0,0,0,0.15)) pro „plovoucí“ dojem
• Obrázky: Kruhové avatary (border-radius: 50%) nebo zaoblené náhledy (8–16px)
• Vstupní pole: Vnitřní stín pro stav stisku/fokusu
• Neumorfní design: Více stínů (světlý a tmavý) s odpovídajícím pozadím

Doporučené postupy

• Používejte jemné stíny: Obvykle stačí 10–20% krytí pro dojem hloubky
• Y-offset > X-offset: Napodobuje přirozené světlo shora
• Větší rozostření pro výšku: Více rozostření = prvek působí výš nad stránkou
• Slaďte barvu stínu: Použijte barvu prvku s nízkou průhledností pro soudržnost
• Výkon: Neanimujte box-shadow, raději použijte opacity nebo transform

Oblíbené styly stínů

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Vzory Border Radius

• Žádné (0px): Ostré rohy, moderní minimalistický vzhled
• Malé (4px): Jemné zaoblení pro vstupy a tlačítka
• Střední (8px): Standard pro karty a kontejnery
• Velké (16px+): Přátelský, „měkčí“ design
• Pilulka (999px nebo 50%): Zaoblené konce pro štítky a odznaky
• Kruh (50%): Avatary, ikonová tlačítka (vyžaduje čtvercový prvek)

Pokročilé techniky

• Více stínů: Kombinujte stíny pro vrstvené efekty
• Efekt záře: 0 0 20px [barva] bez posunu
• Neumorfismus: Světlý stín nahoře vlevo, tmavý stín dole vpravo
• Focus rings: Barevný stín pro přístupnost (0 0 0 3px rgba(color,0.5))
• 3D efekt: Více stínů s rostoucím posunem a rozostřením

Podpora prohlížečů

Box-shadow i border-radius jsou podporovány ve všech moderních prohlížečích. Pro IE8 a starší lze použít vendor prefixy (-webkit-box-shadow, -moz-box-shadow), ale dnes je to zřídka potřeba.

💡 Tip pro profíky: U hover efektů neanimujte box-shadow přímo, protože je to náročné. Místo toho vytvořte stín na pseudo-prvku (::before nebo ::after) a animujte jeho průhlednost. Získáte stejný vizuální efekt s mnohem lepším výkonem, zejména na mobilních zařízeních!