Generator de Border-radius
Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
Ce înseamnă sintaxa border-radius cu 8 valori?
În sintaxa border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, valorile de dinainte de bară oblică sunt razele orizontale (stânga sus, dreapta sus, dreapta jos, stânga jos), iar cele de după sunt razele verticale. Valorile diferite în fiecare direcție creează formele blob organice.
Cum folosesc CSS-ul generat?
Copiază linia border-radius și lipește-o în orice regulă CSS a elementului pe care vrei să-l formezi, de exemplu .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Funcționează în CSS pur, Sass, valori arbitrare Tailwind și stiluri inline.
Unde se folosesc formele blob?
Formele blob sunt populare la ilustrațiile hero, avatare, fotografii de profil, carduri de funcții, butoane și fundaluri decorative în designul modern de web și aplicații.
Colțurile rotunjite funcționează în toate browserele?
Da. border-radius este suportat de toate browserele moderne, inclusiv Chrome, Firefox, Safari, Edge și browserele mobile, fără prefixe de producător.
Pot anima forma blob?
Da. border-radius este o proprietate animabilă, deci o tranziție CSS permite morphing lin între forme, de exemplu .blob { transition: border-radius .8s ease; }.
Care este diferența dintre sintaxa cu 4 și cea cu 8 valori?
Forma cu 4 valori atribuie fiecărui colț aceeași rază orizontală și verticală, suficient pentru pastile și cercuri. Forma cu 8 valori separă razele orizontale de cele verticale, ceea ce permite forme asimetrice, organice.
Cum creez un cerc perfect?
Setează toate cele opt valori la 50% pe un element pătrat sau folosește simplu border-radius: 50%. Poți porni și de la o formă prestabilită apropiată de cerc și să o rafinezi.
Datele mele sunt încărcate undeva?
Nu. Generatorul rulează integral în browserul tău cu CSS și JavaScript pur. Nimic din ce tragi, scrii sau copiezi nu este trimis către vreun server.
Pot folosi asta pe elemente nepătrate?
Da, dar razele procentuale sunt relative la dimensiunile elementului, astfel încât un dreptunghi va avea colțuri eliptice și un aspect diferit de previzualizarea pătrată. Folosește valorile generate ca punct de plecare și ajustează-le.
Cum se folosește Generator de Border-radius
Border-radius cu opt valori produce forme organice de blob cu colțuri eliptice pe care un dreptunghi rotunjit obișnuit nu le poate atinge. Modelează forma cu mânere și copiază CSS-ul gata făcut — totul se randează live în browserul tău.
- Trage oricare dintre cele opt mânere așezate pe marginile formei — cele de pe marginile de sus și de jos reglează razele orizontale, cele de pe laterale pe cele verticale.
- Dă clic pe unul dintre cele șase pătrate de forme prestabilite pentru a porni de la un blob deja desenat, apoi rafinează valorile din câmpurile numerice Raze orizontale și Raze verticale (câte unul pe colț, 0–100%).
- Apasă Aleatoriu pentru a genera dintr-un clic o formă organică nouă, sau Resetează pentru a reveni la forma și culorile implicite.
- Alege o Culoare a formei și un Fundal ca să vezi blobul pe paleta ta țintă — ambele se actualizează instant.
- Apasă Copiază CSS pentru a lua declarația border-radius afișată live în bara de jos și lip-o pe orice element.
Aplică codul pe un element pătrat cu overflow: hidden pentru aspectul clasic de blob; procentele păstrează curba fluidă la orice dimensiune, iar bara oblică din sintaxă separă razele orizontale de cele verticale.
Instrumente conexe
- Generator de Border Radius CSS Generator vizual de border-radius CSS. Ajustați fiecare colț independent cu previzualizare în timp real și copiați codul CSS instantaneu.
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator Box Shadow CSS Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
- Generator paletă culori Creați palete de culori frumoase și armonioase instantaneu cu generatorul nostru online gratuit. Suportă moduri monocromatice, analoge, complementare, triadice, split-complementare și tetradice. Reglați culorile cu glisoare HSL, blocați favoritele și exportați ca CSS, Tailwind, JSON sau SVG. 100% bazat pe browser, datele dvs. nu părăsesc niciodată dispozitivul.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.
- Generator CSS Clip Path Generator CSS clip-path online gratuit. Creează forme polygon, circle, ellipse și inset cu puncte glisabile, previzualizare live și copierea codului CSS dintr-un clic.