Generador de degradats

Creeu un degradat lineal, radial o cònic, afegiu punts de parada de color i definiu la direcció, i després copieu el CSS amb un sol clic.

Tipus de degradat
Punts de parada de color
CSS
Ajusteu els punts de parada i la direcció per dissenyar el degradat.

Cada degradat es renderitza directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.

PMF

Quina és la diferència entre degradats lineals, radials i cònics?

Un degradat lineal barreja colors al llarg d'una línia recta que s'orienta amb un angle. Un degradat radial els estén cap a l'exterior des del centre en forma de cercle o el·lipse. Un degradat cònic els fa girar al voltant del centre com una roda de colors.

Què són els punts de parada de color?

Cada punt de parada és un color fixat en una posició al llarg del degradat: 0% a l'inici, 100% al final. Moveu un punt de parada per desplaçar on assoleix el seu màxim de color, o afegiu-ne més per a una barreja més rica. En podeu utilitzar fins a vuit.

Com controlo la direcció?

Per a un degradat lineal o cònic, el lliscador d'angle en defineix la direcció: 0° apunta cap amunt, 90° cap a la dreta. Un degradat radial no té angle; en el seu lloc, trieu una forma de cercle o el·lipse per canviar com s'estén.

Generador de CSS Cubic BezierArrossegui els dos controladors per dissenyar una corba de transició, observi el moviment d'un punt en comparació amb un de constant i copiï el valor cubic-bezier().Generador de Box ShadowArrossegui els lliscadors per dissenyar una ombra de caixa, acumuli capes per donar profunditat i copiï el CSS resultant a l'instant.Generador de Border RadiusArrodoneixi cada cantó amb lliscadors, creï gotes orgàniques amb el mode el·líptic i copiï el CSS a l'instant.Generador de FlexboxConfigureu un contenidor flex i els seus elements amb controls visuals, observeu com reacciona el disseny en temps real i copieu el CSS amb un sol clic.Generador de CSS GridDefiniu les columnes i files, arrossegueu per les cel·les per col·locar els elements i copieu el CSS de la quadrícula amb l'HTML corresponent amb un sol clic.Calculadora de CSS clamp()Introduïu una mida per a pantalles petites i grans i obtingueu un valor clamp() fluid que s'escala de manera suau entremig, ideal per a mides de font, farcits, marges o espais.Conversor de colorConverteixi colors entre HEX, RGB, HSL, HSV, CMYK i LAB: editi qualsevol camp i la resta s'actualitzarà automàticament.Embellidor i minificador de CSSTorneu a sagnar el CSS desordenat per llegir-lo millor, o minifiqueu-lo per publicar-lo, amb un mode segur que mai reordena les regles.Verificador de contrastIntroduïu un color de text i de fons per veure la relació de contrast WCAG i quins nivells AA i AAA s'assoleixen.