Generator CSS
- Pliki nie opuszczają urządzenia
- Działa w przeglądarce
- Za darmo, bez konta, bez znaku wodnego
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Jak używać: Generator CSS
Generuj CSS wizualnie z podglądem na żywo: cień pudełka, clip-path, easing cubic-bezier, szkło, promień bloba i cień tekstu. Każdy generator daje zwykły CSS i klasę Tailwind o wartości dowolnej, gotową do skopiowania.
- 1
Wybierz generator: Cień pudełka, Clip path, Cubic bezier, Szkło, Promień bloba albo Cień tekstu.
- 2
Zacznij od gotowca albo dostosuj suwaki i kolory.
- 3
Przeciągaj wprost na podglądzie tam, gdzie to możliwe: punkty clip-path, dwa uchwyty beziera albo uchwyty bloba.
- 4
Skopiuj CSS albo klasę Tailwind z wyniku poniżej.
Częste pytania
Czy mogę układać kilka cieni?
Tak. W Cieniu pudełka kliknij Dodaj warstwę, aby łączyć warstwy, każda z własnym przesunięciem, rozmyciem, rozpiętością, kolorem, kryciem i wstawką.
Jak dodać albo usunąć punkty na clip path?
Kliknij dwukrotnie krawędź kształtu, aby dodać punkt; zaznacz punkt i naciśnij Delete, aby go usunąć. Kształty Koło, Elipsa i Wstawka używają zamiast tego suwaków.
Dlaczego nie widzę efektu szkła?
backdrop-filter rozmywa tylko to, co jest za elementem, więc potrzebuje kolorowego albo ruchliwego tła. Wynik zawiera przedrostek -webkit- dla Safari.
Co robią wartości beziera poza 0–1?
Wartości Y powyżej 1 albo poniżej 0 sprawiają, że ruch wychodzi poza cel, co daje efekt odbicia albo wyprzedzenia. Naciśnij Odtwórz, aby porównać z ruchem liniowym.
Czy wynik Tailwind potrzebuje wtyczki?
Nie. Używa składni wartości dowolnych Tailwinda, takiej jak rounded-[…] albo [clip-path:…], która działa w standardowym Tailwindzie.