Softonic

Generator för nätgradienter

Skapa en mjuk, flerfärgad bakgrund med 4, 6 eller 9 flyttbara punkter. Välj varje färg, dra punkterna över arbetsytan, prova en noggrant sammansatt slumpmässig palett och exportera resultatet som SVG eller PNG. Du kan också kopiera en CSS-approximation med överlappande radiella gradienter. Projektet stannar i den här webbläsarfliken medan du arbetar.

Så skapar du en gradient med nätkänsla

  1. 1

    Välj rutnät

    Börja med 4, 6 eller 9 kontrollpunkter. Fler punkter skapar fler tydliga färgområden.

  2. 2

    Välj färger

    Använd färgväljaren för varje punkt. Redigeraren lagrar sexsiffriga HEX-färger.

  3. 3

    Flytta punkterna

    Dra en punkt, ange dess vågräta och lodräta position eller använd piltangenterna.

  4. 4

    Välj storlek

    Välj liggande, bredbild eller kvadratiskt format för SVG- och PNG-filerna.

  5. 5

    Exportera motivet

    Ladda ner PNG eller SVG, eller kopiera CSS-approximationen med radiella gradienter.

Så renderas de tre formaten

  • PNG använder samma avståndsviktade färgblandning som förhandsvisningen. Med ett annat bildförhållande placeras samma relativa punkter i de nya måtten.
  • SVG överlappar radiella gradienter vid samma kontrollpunkter och förblir skarp när den skalas.
  • CSS skapar ett lager med radial-gradient() per punkt ovanpå en grundfärg, utan en separat bildfil.

SVG och CSS använder samma projektdata, men är lätta approximationer av nätutseendet. Deras pixlar blir inte identiska med PNG-förhandsvisningen.

Råd om färgpaletten

  • Närliggande nyanser ger oftast mjuka övergångar.
  • Kontrasterande nyanser gör gränserna mellan områden tydligare.
  • Slumpmässiga paletter är utgångspunkter, inte garantier för läsbarhet.
  • Kontrollera kontrasten för text, ikoner och reglage som placeras på bakgrunden.

Placera kontrollpunkterna

Dra en numrerad punkt i förhandsvisningen eller fokusera den och använd piltangenterna. Håll ned Skift för att flytta fem procentenheter. Fälten för vågrät och lodrät position ger också exakt inmatning.

Punkterna kan nå kanten. Flera punkter nära varandra samlar färgerna i ett område, medan större avstånd ger varje färg mer plats.

Vanliga användningsområden

  • Bakgrunder för huvudsektioner och avdelare.
  • Bilder för sociala medier och videominiatyrer.
  • Bakgrunder för presentationer och illustrationer.
  • Startskärmar och dekorativa paneler.

PNG ligger närmast förhandsvisningen. Använd SVG när skarp skalning är viktig eller CSS för en redigerbar bakgrund utan separat bild.

Integritet och webbläsarlagring

Färger, positioner och upplösning stannar i webbläsarens minne och i sessionStorage. De läggs inte till i trattens webbadresser eller servertillståndet. Verktyget kan registrera att en export gjordes utan att spara projektets värden.

Projektet kan återställas från sessionStorage i högst sex timmar så länge den aktuella fliken är öppen. När fliken stängs tas det vanligtvis bort tidigare, så ladda ner eller kopiera det du vill behålla.

Vanliga frågor

De använder olika renderingsmetoder. PNG blandar pixlar efter avstånd, medan SVG och CSS överlappar radiella gradienter. Färger och positioner är gemensamma, men pixlarna är inte identiska.

Ja. Dra en punkt, använd positionsfälten eller fokusera den och tryck på piltangenterna. Håll ned Skift för större steg.

Redigeraren lagrar sexsiffriga HEX-färger. Använd färgväljaren eller konvertera först RGB eller HSL till HEX.

Nej. Den kopierade CSS-koden approximerar effekten genom att stapla vanliga radiella gradienter.

Det kan återställas från sessionStorage i högst sex timmar i den aktuella fliken. När fliken stängs tas det normalt bort tidigare. Projektet skickas inte till våra servrar och läggs inte till i trattens webbadresser.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.