Gradientgenerator

Välj två eller fler färger, dra gradienten efter smak, kopiera CSS. Eller ladda ner som PNG för att använda som bakgrundsbild, presentationsbakgrund eller bakgrund för sociala medier. Linjära, radiella och koniska gradienter stöds alla, plus ett mesh-gradientläge för de mjuka Apple-inspirerade bakgrunderna du ser i moderna gränssnitt.

Gradienttyper förklarade

• Linjär: rak linje från färg A till färg B. Riktningsväljare (uppifrån och ner, diagonalt, etc.).
• Radiell: koncentrisk — färg A i mitten som tonas ut till färg B vid kanterna. Användbar för spotlighteffekter.
• Konisk: sveper runt en mittpunkt som ett färghjul. Trendigt i modern UI-design.
• Mesh (premium): flera färgklumpar som blandas mjukt. Utseendet av "Apple-gradient".

Vad du kan kopiera

1. CSS: färdig att klistra in linear-gradient(...) eller background-image:-deklaration.
2. Tailwind: den närmaste bg-gradient-*-klassen plus eventuella anpassade färgtillägg.
3. SVG: för skalbar användning i ikoner eller UI-grafik.
4. PNG-nedladdning: valfri storlek, inklusive telefonbakgrund (1284×2778), skrivbord (3840×2160) och kvadratisk (1080×1080).

Vanliga användningsområden

• Telefonbakgrunder: mesh-gradienter är stora på iOS. Prova vår iPhone-bakgrundsförhandsvisning för att testa.
• Bakgrunder för sociala inlägg: omedelbar varumärkeskänsla för citatgrafik.
• Hero-sektioner: gradientbakgrunder finns överallt på målsidor.
• Bildspel: ersätt tråkiga enfärgade bakgrunder.

Välj färger som fungerar

Intill varandra på färghjulet = subtilt, harmoniskt. Motsatta = djärvt, fångar uppmärksamhet. Lägg till en tredje mittstop för att överbrygga ett stort gap. För varumärkestrogna gradienter, klistra in din varumärkes HEX och välj en nyans eller ton för det andra stoppet. Använd vår färgomvandlare för att hitta ljusare nyanser (HSL med högre ljusstyrka) eller mörkare nyanser (lägre).