Generator kształtów CSS

15 kształtów w czystym CSS, od koła po gwiazdę, z podglądem na żywo, obrotem, pochyleniem i gotowym kodem CSS i HTML.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Jak powstaje każdy kształt

Technika CSS dla poszczególnych kształtów
Kształt	Technika CSS	Na co uważać
Koło	border-radius: 50%	Koło wychodzi tylko przy równych wymiarach; przy różnych powstaje elipsa.
Prostokąt, zaokrąglony, pigułka	width, height, background, border-radius	Pigułka to bardzo duży promień (999px), który zaokrągla krótszy bok do połowy.
Trójkąty	border z przezroczystymi bokami	Element ma rozmiar 0 × 0 px: kolor trójkąta to kolor obramowania, nie ma w nim miejsca na tekst.
Romb	transform: rotate(45deg)	To obrócony kwadrat; przy różnych wymiarach wyjdzie wydłużony. Obrót nie zmienia miejsca zajmowanego w układzie strony.
Równoległobok	transform: skewX()	Pochylenie dotyczy też zawartości elementu, np. tekstu w środku.
Trapez, pięciokąt, sześciokąt, ośmiokąt, gwiazda	clip-path: polygon()	Wycięcie obcina także cień i obramowanie; cień dodaj na elemencie nadrzędnym przez filter: drop-shadow().

Jak to liczymy

Przy równych wymiarach 120 × 120 px border-radius: 50% daje koło.

Obrót i pochylenie

Obrót jest ograniczany do zakresu od -360° do 360°. Pochylenie równoległoboku mieści się w zakresie od -45° do 45°, dla pozostałych kształtów od -90° do 90°. Transformacje nie zmieniają miejsca, które element zajmuje w układzie strony.

Dwa zapisy clip-path

Dla wielokątów generator zapisuje clip-path także z prefiksem -webkit-, z tą samą wartością. Starsze przeglądarki oparte na WebKit mogą znać tylko wersję z prefiksem.

Skalowanie

Wymiary w kodzie są w pikselach. Aby kształt rósł razem z tekstem, zamień po skopiowaniu px na em lub rem. Wielokąty z clip-path skalują się razem z wymiarami elementu.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator kształtów CSS

Kształty CSS to figury rysowane samym kodem: koło, trójkąt, romb, sześciokąt czy gwiazda, bez obrazków i SVG. Generator daje gotową regułę CSS i jeden element HTML, które kopiujesz do projektu. Do wyboru jest 15 kształtów, a podgląd odświeża się po każdej zmianie wymiaru, koloru, obrotu czy pochylenia.

darmowe online bez rejestracji podgląd na żywo HTML + CSS do kopiowania obrót i pochylenie

Kształty w CSS potrafią wyglądać zaskakująco profesjonalnie, jeśli trzymasz się kilku prostych zasad: sensowne wymiary, spójny kolor i świadome użycie transformacji. W praktyce te figury najczęściej lądują w UI jako ikony, tła pod liczby, oznaczenia kroków, „badge” w cenniku, elementy hero, separatory sekcji albo małe dekoracje przy nagłówkach. Do takich zastosowań powstał ten generator.

Efekt bez grafika i bez plików

Generator tworzy kształty wyłącznie w CSS. Dla prostokąta, zaokrąglonego prostokąta, pigułki i koła to klasyczne właściwości width, height, background i border-radius. Dla trójkątów używa sprawdzonej sztuczki z obramowaniami (border), romb to obrócony kwadrat, równoległobok to pochylony prostokąt, a trapez, pięciokąt, sześciokąt, ośmiokąt i gwiazdę wycina clip-path: polygon().

To oznacza: brak dodatkowych plików, brak eksportu, brak kompresji, brak „czy PNG ma przezroczystość”. Jest tylko kod, który możesz wersjonować w repo i poprawiać w kilka sekund.

Podgląd na żywo i kod, który da się przenieść

Wybierasz kształt, ustawiasz wymiary i kolor, ewentualnie dorzucasz obrót albo pochylenie – i od razu widzisz wynik na tle w szachownicę. Potem kopiujesz CSS oraz HTML i wklejasz do projektu. Kod jest prosty: jedna klasa (domyślnie .shape, nazwę zmienisz w polu „Nazwa klasy CSS”) i jeden element <div class="shape"></div>.

Nie dostajesz dziwnej struktury z pięcioma zagnieżdżeniami, tylko minimalny, przenośny snippet. Po zaznaczeniu opcji „Skompresowany kod CSS” cała reguła trafia do jednej linii.

Jak korzystać z generatora kształtów CSS

Najpierw wybierasz figurę, potem ustawiasz rozmiar, na końcu dopracowujesz transformacje. I dopiero wtedy kopiujesz kod. Brzmi oczywiście, ale w praktyce wiele osób robi odwrotnie – kopiuje, a potem zaczyna „rzeźbić” w CSS w ciemno.

Wybierz gotowy wzór albo kształt – wzory (kropka powiadomienia, strzałka listy, pigułka-tag, zaokrąglony przycisk, pochylona wstęga, gwiazdka) ustawiają od razu wszystkie parametry. Kształty do wyboru: koło, prostokąt, zaokrąglony prostokąt, pigułka, cztery trójkąty (▲ ▼ ◀ ▶), romb, równoległobok, trapez, pięciokąt, sześciokąt, ośmiokąt i gwiazda.
Ustaw wymiary – szerokość i wysokość w pikselach: suwakiem w zakresie 10–400 px albo wpisując wartość od 1 do 4000 px. Dla zaokrąglonego prostokąta pojawia się też promień narożników (0–2000 px).
Wybierz kolor – wpisz HEX (3 lub 6 znaków, np. #f59e0b; znak # możesz pominąć) albo użyj próbnika.
Dodaj transformacje – obrót (rotate) i pochylenie (skew), jeśli potrzebujesz bardziej dynamicznego wyglądu.
Kopiuj CSS i HTML – wklej do projektu. Klasę możesz od razu nazwać po swojemu (np. badge-shape): nazwa musi zaczynać się od litery, może mieć litery, cyfry, myślnik i podkreślnik, maksymalnie 40 znaków.

Jeśli to element UI, trzymaj wymiary w okolicach 12–48 px (ikonowe) albo 64–160 px (dekoracyjne).
Jeśli kształt ma być „tłem” dla tekstu, dodaj w HTML obok tekst i ustaw wyrównanie flexem w kontenerze.
Jeśli używasz clip-path, sprawdź, czy element ma działać w starych przeglądarkach (i czy w ogóle musi).

Mała, ale ważna rzecz: trapez, pięciokąt, sześciokąt, ośmiokąt i gwiazda bazują na clip-path: polygon(...). Generator dopisuje tę samą wartość także z prefiksem -webkit-clip-path dla starszych przeglądarek opartych na WebKit. W nowoczesnych przeglądarkach to działa, ale w specyficznych klientach poczty może nie zadziałać. Jeśli robisz element do e-maila, zostań przy prostokącie, kole lub trójkącie z borderów.

Kształty w CSS: co jest pod spodem i kiedy czego używać

Każdy kształt ma swoją „logikę”. Gdy ją rozumiesz, przestajesz zgadywać i zaczynasz kontrolować efekt. Generator pokazuje gotową wersję, a Ty możesz potem świadomie dostroić kod (np. pod konkretny komponent w design systemie).

Kształt	Technika	Typowe zastosowanie	Wskazówka
Prostokąt / kwadrat	width/height + background	badge, tło pod liczbę, sekcje	Jeśli ma być „miękko”, wybierz zaokrąglony prostokąt i promień 8–16 px.
Pigułka	border-radius: 999px	tagi, etykiety, przełączniki	Promień 999px jest większy niż połowa boku, więc krótszy bok zaokrągla się do połowy.
Koło	border-radius: 50%	ikonki, avatary, statusy	Koło wychodzi tylko przy width = height; przy różnych wymiarach powstaje elipsa.
Romb	rotate(45deg) na kwadracie	dekoracje, wyróżniki, punkty osi czasu	Uważaj na obrót tekstu w środku – zwykle tekst daj obok.
Równoległobok	skewX(...)	etykiety „promo”, dynamiczne nagłówki	Za duży skew wygląda agresywnie – często 10–25° wystarcza.
Trójkąt (4 kierunki)	border + transparent	strzałki, dymki, tooltipy	Element ma 0 × 0 px; kolor trójkąta to kolor jednego z obramowań.
Trapez, pięciokąt, ośmiokąt	clip-path: polygon	nagłówki kart, znaczniki, ikony sekcji	Punkty wielokąta są w procentach, więc kształt skaluje się z wymiarami.
Sześciokąt (heksagon)	clip-path: polygon	karty feature, ikony sekcji	Na małych rozmiarach (np. 16 px) heksagon traci czytelność.
Gwiazda	clip-path: polygon	oceny, wyróżnienia, „top”	W UI często lepsza jest prosta gwiazdka z fonta, ale jako tło gwiazda z CSS sprawdza się dobrze.

Przykład: trójkąt CSS o wymiarach 100 × 80 px

Dla trójkąta ▲ generator dzieli szerokość 100 px na dwie połowy po 50 px (przezroczyste border-left i border-right), a wysokość 80 px trafia do kolorowego border-bottom:

.shape { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #2563eb; }

Reguła kształtu ma 5 deklaracji i tyle pokaże kafelek „Deklaracje CSS”. Pułapka przy nieparzystej szerokości: połowa jest zaokrąglana, więc dla 101 px obie strony dostaną po 51 px i trójkąt będzie miał 102 px szerokości. Trójkąty ◀ i ▶ działają odwrotnie: na połowy dzielona jest wysokość.

Transformacje: obrót i pochylenie, które nie wyglądają „krzywo”

Dwie transformacje dostępne w generatorze to rotate i skew. Obrót jest bezpieczny – kręcisz element i tyle. Pochylenie bywa zdradliwe, bo potrafi optycznie „rozciągnąć” kształt i sprawić, że layout wygląda mniej stabilnie. Dlatego w praktyce skew to przyprawa, nie danie główne.

Zakresy są ograniczane automatycznie: obrót od -360° do 360°, pochylenie równoległoboku od -45° do 45°, a pozostałych kształtów od -90° do 90°. Przy równoległoboku pochylenie 0° daje zwykły prostokąt, a puste pole oznacza domyślne 20°. Przy rombie Twój obrót jest dopisywany przed rotate(45deg), więc romb zachowuje swój podstawowy kształt.

Jeśli pochylenie stosujesz do koła czy heksagonu, rób to świadomie: najpierw zobacz, czy to nadal wspiera przekaz. Czasem wystarczy rotate(6deg) zamiast skew(20deg), żeby uzyskać „żywszy” design bez efektu przypadkowości.

Tip praktyczny do UI

Jeżeli kształt ma być tłem pod ikonę albo liczbę, często lepiej jest nie transformować samego kontentu. Zamiast tego transformuj kształt jako dekorację, a tekst lub ikonę trzymaj w osobnym elemencie obok lub nad nim w kontenerze (np. flex + pozycjonowanie).

Tip praktyczny do layoutu

Transformacje nie zmieniają miejsca, które element zajmuje w układzie strony, ale zmieniają to, co widzisz. Jeśli obrót sprawia, że element wygląda, jakby wychodził poza sekcję – dodaj trochę paddingu w kontenerze lub ustaw overflow: visible tam, gdzie to ma sens.

Dla kogo to narzędzie jest najlepsze

Jeśli pracujesz przy stronach, aplikacjach albo dashboardach, kształty z CSS to sposób na poprawienie czytelności interfejsu bez dokładania ciężaru. Nie chodzi o sztukę dla sztuki – chodzi o małe akcenty, które prowadzą wzrok, oddzielają sekcje, sygnalizują status i budują hierarchię.

UI

Ikony tła, wyróżniki etapów, etykiety „nowość”, „promo”, „beta”, kropki powiadomień. Kształt robi za „ramę” dla informacji.

Landing page

Dekoracje przy nagłówkach, tła pod liczbowe benefity, akcenty w sekcjach „dlaczego my”. Bez grafik, a wygląda świeżo.

Komponenty

Design system: raz generujesz bazowy kształt z własną nazwą klasy i potem tylko zmieniasz kolor, rozmiar czy transformacje.

Prototypy

Szybkie makiety bez otwierania programów graficznych. Gdy trzeba „na wczoraj”, kilka linijek CSS wystarcza.

Najczęstsze błędy i jak ich uniknąć

Kształty w CSS są proste… dopóki nie zaczniesz ich „przyklejać” do treści bez planu. Poniżej masz klasyki, które powodują, że element wygląda tanio albo psuje layout, i sposoby, jak temu zapobiec.

Zbyt duży rozmiar bez kontekstu

Jeśli kształt ma być tylko akcentem, a robisz go 200 × 200 px, nagle staje się głównym bohaterem. Najpierw zdecyduj: to dekoracja czy content? Dekoracja ma wspierać, nie dominować.

Skew „na maksa”

Pochylenie wygląda dobrze w małej dawce. W dużej robi chaos, szczególnie gdy obok są prostokątne karty i równe siatki. Jeśli już skew – to z umiarem i konsekwentnie w kilku miejscach, a nie raz tu, raz tam.

Elipsa zamiast koła

border-radius: 50% daje koło tylko wtedy, gdy szerokość równa się wysokości. Tak samo romb: z prostokąta wyjdzie romb wydłużony. Generator ostrzega o tym w opisie wyniku.

Cień i obramowanie przy clip-path

Wycięcie obcina także box-shadow i border. Cień pod sześciokątem czy gwiazdą dodaj na elemencie nadrzędnym przez filter: drop-shadow().

Clip-path bez myślenia o kompatybilności

Wielokąty to świetny efekt, ale jeśli projekt ma działać w specyficznych środowiskach, przygotuj plan B. Czasem planem B jest zwykłe koło albo zaokrąglony kwadrat.

Romb jako „kontener na tekst”

Romb (czyli kwadrat obrócony o 45°) dobrze wygląda jako znacznik, ale tekst w środku obraca się razem z nim. Lepiej użyć rombu jako ikonki obok tekstu albo jako tła pod samą kropkę czy liczbę.

FAQ – kształty CSS

Czy to działa bez obrazków i SVG?

Tak. Generator tworzy kształty wyłącznie w CSS, a HTML to pojedynczy element z klasą. Nie ładujesz żadnych plików graficznych i całym wyglądem sterujesz w kodzie.

Jak wstawić taki kształt do projektu, żeby nie gryzł się z innymi stylami?

Wpisz w polu „Nazwa klasy CSS” konkretną nazwę, np. hero-badge albo step-marker, zamiast domyślnej shape, i trzymaj CSS w stylach danego komponentu. Jeśli używasz Tailwinda, potraktuj wygenerowany CSS jako bazę do przepisania na klasy narzędziowe.

Jak zrobić trójkąt w CSS?

Ustawia się width: 0; height: 0; i buduje kształt z obramowań: dwa boki są przezroczyste, a trzeci ma kolor. Wysokość trójkąta to grubość kolorowego obramowania, a szerokość to suma dwóch przezroczystych.

Czy mogę obracać i pochylać każdy kształt?

Tak, obrót i pochylenie działają dla wszystkich 15 kształtów. Przy wielokątach z clip-path mocne pochylenie optycznie psuje symetrię, więc lepiej zostać przy małych wartościach.

Co oznaczają „Rozmiar kodu” i „Deklaracje CSS” w wyniku?

„Rozmiar kodu” to liczba bajtów wygenerowanego CSS razem z HTML; wersja skompresowana jest mniejsza. „Deklaracje CSS” to liczba właściwości w regule kształtu: koło ma ich 4, a trójkąt i sześciokąt po 5 (w wielokątach piątą jest clip-path z prefiksem -webkit-). Ustawiony obrót lub pochylenie dokłada jedną deklarację transform (romb i równoległobok mają ją zawsze).

Czy te kształty są responsywne?

Wymiary są w pikselach, więc kształt ma stały rozmiar. Po wklejeniu kodu możesz zamienić px na em, rem, clamp() albo zmienne CSS; wielokąty z clip-path skalują się wtedy same, bo ich punkty są zapisane w procentach.

Gotowy do działania?

Jeśli potrzebujesz prostego efektu wizualnego bez grafika, ten generator odpalasz „na 30 sekund” i zamykasz z gotowym kodem w schowku. Wybierz kształt, ustaw parametry, skopiuj snippet.

Przejdź do generatora i wygeneruj kod

A jeśli chcesz to zrobić porządnie: wygeneruj dwa warianty (np. koło i równoległobok), porównaj w podglądzie, a potem zdecyduj, który bardziej pasuje do charakteru UI. Czasem minimalny detal robi większą różnicę niż kolejny „efekt wow” w animacji.