⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

Generator de forme de blob CSS organic

Proiectați vizual raza marginii CSS: patru glisoare de colț independente în pixeli sau procente, o comandă rapidă pentru toate colțurile pentru cercuri și pastile instantanee, plus un mod blob organic cu forme aleatorii.

12px
12px
12px
12px
Procesare... 0%

Rezultat

Această pagină deschide generatorul de rază de margine direct în modul blob cu o formă organică deja încărcată: fără colțuri pătrate, fără cerc perfect, doar un contur neregulat moale construit numai din CSS. Apăsați Randomize oricând pentru o nouă variantă.

Trucul din spatele fiecărui blob CSS este sintaxa barei oblice cu opt valori: border-radius acceptă două seturi de patru procente separate de o oblică, primul set curbând razele orizontale și al doilea pe cele verticale. Nepotrivirea celor două seturi este exact ceea ce sparge simetria unui dreptunghi simplu rotunjit într-un contur organic.

Blob-uri ca acesta umple spațiul gol din spatele imaginilor eroilor, avatarurilor și ilustrațiilor de pe nenumărate pagini de destinație moderne, tocmai pentru că nu este nevoie de nicio bibliotecă sau export SVG - este vorba de patru linii de CSS. Copiați forma curentă sau continuați randomizarea până când se simte potrivit pentru aspectul dvs.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Modul Colțuri: glisoare independente de rază sus-stânga, sus-dreapta, jos-dreapta și jos-stânga, fiecare comutabil între unități px și procente.
  • Casetă de selectare Conectați toate colțurile care conduce fiecare colț dintr-un singur glisor, plus o previzualizare de șah pe un fundal deschis sau întunecat, astfel încât colțurile tăiate să rămână vizibile.
  • Modul blob cu un buton Randomize care creează forme organice de sintaxă oblică cu opt valori, afișate mari și gata de copiat ca CSS.

Beneficii cheie

✓ Fiecare glisor actualizează instantaneu previzualizarea live și linia CSS, astfel încât nu trebuie să ghiciți niciodată cum arată de fapt 12px 40% 8px 24%.
✓ Comanda rapidă pentru toate colțurile transformă un glisor într-un cerc perfect, pastilă sau squircle, fără a atinge celelalte trei colțuri cu mâna.
✓ Modul blob generează forme organice, randomizate, cu sintaxa barei oblice CSS cu opt valori - un aspect pe care nu o poate produce niciodată o singură valoare a razei de margine.

Cazuri de utilizare

  • • Formați în mod independent cele patru raze de colț ale unui card - rotunjiți numai partea de sus a unui panou derulant sau doar o parte a unei file.
  • • Conectați toate cele patru colțuri la un singur cursor pentru a construi un cerc perfect, un buton de pilule în formă de stadion sau un squircle în stil iOS în câteva secunde.
  • • Treceți la modul blob și apăsați Randomize până când o formă organică se potrivește spațiului gol din spatele unei imagini sau avatarului erou, apoi copiați CSS-ul.