Generator Box Shadow CSS

Twórz cienie box-shadow z podglądem na żywo: rozmycie, rozprzestrzenienie.

Przesunięcie X: 0px

Przesunięcie Y: 4px

Rozmycie: 12px

Rozprzestrzenienie: 0px

Krycie: 10%

Wewnętrzny

Podgląd

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

Szukasz gradientów lub glassmorfizmu? Wypróbuj nasze dedykowane narzędzia: Generator Gradientów CSS · Kreator Glassmorfizmu

Jak to działa

Wybierz efekt: box-shadow, gradient lub glassmorphism.
Dostosuj kontrolki i obserwuj aktualizujący się podgląd na żywo.
Dopracuj kolory, rozmycie, rozproszenie i przezroczystość.
Skopiuj wygenerowany kod CSS.

Do czego służy

Ustawienie box-shadow bez zgadywania wartości.
Zbudowanie gradientu wizualnie i skopiowanie kodu CSS.
Utworzenie efektu karty w stylu glassmorphism.

Warto wiedzieć

Narzędzie generuje standardowy CSS; niektóre efekty (jak rozmycie backdrop-filter) zależą od wsparcia przeglądarki dla końcowego wyglądu.
Podgląd pokazuje jeden element — przetestuj w faktycznym układzie pod kątem nakładania i interakcji z tłem.

Najczęstsze pytania

Jakie efekty mogę wygenerować?

Box-shadow, gradienty liniowe/radialne oraz glassmorphism — każdy z podglądem na żywo, więc dostrajasz na oko, a nie metodą prób i błędów.

Czy glassmorphism zadziała wszędzie?

Opiera się na backdrop-filter, który większość nowoczesnych przeglądarek obsługuje; starsze wracają do zwykłego tła. Przetestuj w docelowych przeglądarkach.

Czy cokolwiek jest przesyłane?

Nie. CSS jest generowany na żywo w Twojej przeglądarce.

Powiązane narzędzia

Przeglądarka DXF

Paleta Kolorów

Konwerter Kolorów

Sprawdzanie Kontrastu

Kreator Kart Glass