Grunderna i CSS-toningar
En CSS-toning (gradient) är en visuell övergång mellan två eller flera färger som renderas direkt av webbläsaren. Istället för att använda tunga bildfiler kan webbdesigners och utvecklare definiera dessa färgövergångar direkt i stilmallar. Detta ger snabbare laddningstider och skarpa övergångar oavsett skärmupplösning.
Med detta verktyg går det att skapa tre olika typer av toningar: linjära, radiella och koniska. Genom att justera parametrar som vinkel, form och placering av färgstopp genereras den exakta CSS-koden som behövs för att implementera toningen på en webbplats.
Linjära toningar: Riktning och färgstopp
En linjär toning blandar färger längs en rak linje. Riktningen på denna linje bestäms av en vinkel.
När du väljer Linjär (linear) under Typ av toning kan du styra riktningen med ett vinkelreglage:
- En vinkel på 0° pekar rakt uppåt.
- En vinkel på 90° pekar åt höger.
- Värdet kan justeras steglöst för att styra färgernas flöde diagonalt eller i valfri riktning över ytan.
Färgerna fördelar sig längs denna linje baserat på sina tilldelade positioner, från startpunkten till slutpunkten.
Radiella toningar: Former och färgfördelning
En radiell toning sprider färger utåt från mitten. Till skillnad från linjära toningar används inte en vinkel för att styra utseendet. Istället styrs formen av geometriska figurer.
Under Form kan du välja mellan två alternativ:
- Ellips: Färgerna sprider sig i en oval form som anpassar sig efter behållarens proportioner.
- Cirkel: Färgerna sprider sig i en perfekt cirkulär form oavsett behållarens höjd och bredd.
Färgövergången sker koncentriskt från centrum och utåt mot kanterna.
Koniska toningar: Rotation runt en mittpunkt
En konisk toning sveper färger runt en central mittpunkt istället för att sprida dem utåt eller längs en linje. Resultatet liknar ett färgshjul eller en tredimensionell kon sedd ovanifrån.
När du väljer Konisk (conic) under Typ av toning kan du använda vinkelreglaget för att bestämma startvinkeln för svepet. Precis som för linjära toningar motsvarar 0° uppåt och 90° åt höger. Färgerna övergår i varandra i medurs riktning runt mittpunkten baserat på deras procentuella positioner.
Färgstoppens roll i toningsdesign
Ett färgstopp är en specifik färg som är fäst vid en bestämd position längs toningen.
- Positionen anges som ett procentvärde från 0% (starten av toningen) till 100% (slutet av toningen).
- Genom att flytta positionen förskjuts punkten där färgen är som renast och mest intensiv.
- Avståndet mellan två färgstopp avgör hur skarp eller mjuk övergången mellan färgerna blir.
Verktyget startar med en initial toning som består av två färgstopp:
#6366f1vid positionen 0%#ec4899vid positionen 100%
Du kan lägga till fler färger för att skapa mer komplexa övergångar. När du klickar på Lägg till färgstopp får det nya färgstoppet standardpositionen 50%. Du kan använda upp till åtta färgstopp. När du har lagt till maximalt antal stopp avaktiveras knappen Lägg till färgstopp. Om du vill ta bort ett färgstopp använder du knappen Ta bort färgstopp.
Praktisk användning av verktyget
Detta verktyg är utformat för att underlätta skapandet av CSS-bakgrunder. Oavsett om du behöver en enkel övergång mellan två färger eller en avancerad konisk toning med upp till åtta färgstopp, kan du konfigurera och förhandsgranska resultatet i realtid.
Steg för att skapa och kopiera en toning:
- Välj önskad Typ av toning: Linjär (linear), Radiell (radial) eller Konisk (conic).
- Justera riktningen via Vinkel (för linjära och koniska) eller välj Form (för radiella).
- Anpassa dina Färgstopp genom att ändra Färg på stopp och Position.
- Klicka på Kopiera CSS under rubriken CSS. Knappen ändrar då text till Copied för att bekräfta att koden har kopierats till ditt urklipp.
Integritet och lokal databehandling
Varje toning renderas direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo. All generering av CSS-kod och visuell förhandsgranskning sker lokalt på din enhet.
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.