Gradient-generator

Bygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.

Typ av toning
Färgstopp
CSS
Justera stopp och riktning för att forma din toning.

Varje toning renderas direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Vad är skillnaden mellan linjära, radiella och koniska toningar?

En linjär toning (linear) blandar färger längs en rak linje som du riktar med en vinkel. En radiell toning (radial) sprider dem utåt från mitten i en cirkel eller ellips. En konisk toning (conic) sveper dem runt mitten som ett färgshjul.

Vad är färgstopp?

Varje färgstopp är en färg fäst vid en position längs toningen – 0% i början, 100% i slutet. Flytta ett stopp för att ändra var dess färg är som starkast, eller lägg till fler stopp för en rikare blandning. Du kan använda upp till åtta stycken.

Hur styr jag riktningen?

För en linjär eller konisk toning bestämmer vinkelreglaget riktningen – 0° pekar uppåt, 90° pekar åt höger. En radiell toning har ingen vinkel; välj istället en cirkel- eller ellipsform för att ändra hur den sprider sig.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.CSS-formaterare & minifierareStrukturera rörig CSS för att göra den läsbar, eller minifiera den inför driftsättning – med ett säkert läge som aldrig ändrar ordningen på dina regler.KontrastkontrollAnge en text- och bakgrundsfärg för att se WCAG-kontrastförhållandet och vilka AA- och AAA-nivåer som blir godkända.