BrowserFun
Nya spelAlla spel
  • Hem
  • Nya spel
  • Spel
BrowserFun

Gratis pedagogiska spel för varje klassrum.

Kategorier

  • Matematik
  • English Language Arts
  • Social Studies
  • Technology
  • Vetenskap & Natur

Utforska

  • Alla spel
  • Nya spel
  • Alla kategorier

Juridiskt

  • Integritetspolicy
  • Användarvillkor
  • Cookiepolicy
  • Ansvarsfriskrivning

© 2026 BrowserFun. Alla rättigheter reserverade.

  1. Hem
  2. Verktyg
  3. Bibliotek med Populära Färggradienter

Bibliotek med Populära Färggradienter

Utforska vår kurerade samling av över 100 fantastiska färggradienter. Klicka på gradientprover för att se enskilda färger, kopiera CSS-kod direkt och hitta perfekta gradientkombinationer för din design.

toolFärgAlla Åldrar

Färggradienter

Sunset

#ff7e5f → #feb47b

Klicka för att kopiera gradient

Cool Blues

#2193b0 → #6dd5ed

Klicka för att kopiera gradient

Purple Dream

#cc2b5e → #753a88

Klicka för att kopiera gradient

Aqua Marine

#1a2980 → #26d0ce

Klicka för att kopiera gradient

Fresh Turboscent

#f1f2b5 → #135058

Klicka för att kopiera gradient

Moonlit Asteroid

#0F2027 → #203A43 → #2C5364

Klicka för att kopiera gradient

Crimson Tide

#642B73 → #C6426E

Klicka för att kopiera gradient

Winter Neva

#a1c4fd → #c2e9fb

Klicka för att kopiera gradient

Emerald Water

#348F50 → #56B4D3

Klicka för att kopiera gradient

Lemon Twist

#F7971E → #FFD200

Klicka för att kopiera gradient

Mauve

#42275a → #734b6d

Klicka för att kopiera gradient

Royal Blue

#536976 → #292E49

Klicka för att kopiera gradient

Deep Sea Space

#2C3E50 → #4CA1AF

Klicka för att kopiera gradient

Scooter

#36D1DC → #5B86E5

Klicka för att kopiera gradient

Celestial

#C33764 → #1D2671

Klicka för att kopiera gradient

Roseanna

#FFAFBD → #ffc3a0

Klicka för att kopiera gradient

Honey Dew

#43C6AC → #F8FFAE

Klicka för att kopiera gradient

Juicy Orange

#FF8008 → #FFC837

Klicka för att kopiera gradient

Mirage

#16222A → #3A6073

Klicka för att kopiera gradient

Steel Gray

#1F1C2C → #928DAB

Klicka för att kopiera gradient

Kashmir

#614385 → #516395

Klicka för att kopiera gradient

Electric Violet

#4776E6 → #8E54E9

Klicka för att kopiera gradient

Venice Blue

#085078 → #85D8CE

Klicka för att kopiera gradient

Bora Bora

#2BC0E4 → #EAECC6

Klicka för att kopiera gradient

Moss

#134E5E → #71B280

Klicka för att kopiera gradient

Shroom Haze

#5C258D → #4389A2

Klicka för att kopiera gradient

Mystic

#757F9A → #D7DDE8

Klicka för att kopiera gradient

Midnight City

#232526 → #414345

Klicka för att kopiera gradient

Sea Blizz

#1CD8D2 → #93EDC7

Klicka för att kopiera gradient

Opa

#3D7EAA → #FFE47A

Klicka för att kopiera gradient

Titanium

#283048 → #859398

Klicka för att kopiera gradient

Mantle

#24C6DC → #514A9D

Klicka för att kopiera gradient

Dracula

#DC2424 → #4A569D

Klicka för att kopiera gradient

Peach

#ED4264 → #FFEDBC

Klicka för att kopiera gradient

Moonrise

#DAE2F8 → #D6A4A4

Klicka för att kopiera gradient

Clouds

#ECE9E6 → #FFFFFF

Klicka för att kopiera gradient

Stellar

#7474BF → #348AC7

Klicka för att kopiera gradient

Bourbon

#EC6F66 → #F3A183

Klicka för att kopiera gradient

Calm Darya

#5f2c82 → #49a09d

Klicka för att kopiera gradient

Influenza

#C04848 → #480048

Klicka för att kopiera gradient

Shrimpy

#e43a15 → #e65245

Klicka för att kopiera gradient

Army

#414d0b → #727a17

Klicka för att kopiera gradient

Miaka

#FC354C → #0ABFBC

Klicka för att kopiera gradient

Pinot Noir

#4b6cb7 → #182848

Klicka för att kopiera gradient

Day Tripper

#f857a6 → #ff5858

Klicka för att kopiera gradient

Namn

#a73737 → #7a2828

Klicka för att kopiera gradient

Blurry Beach

#d53369 → #cbad6d

Klicka för att kopiera gradient

Vasily

#e9d362 → #333333

Klicka för att kopiera gradient

A Lost Memory

#DE6262 → #FFB88C

Klicka för att kopiera gradient

Petrichor

#666600 → #999966

Klicka för att kopiera gradient

Jonquil

#FFEEEE → #DDEFBB

Klicka för att kopiera gradient

Sirius Tamed

#EFEFBB → #D4D3DD

Klicka för att kopiera gradient

Kyoto

#c21500 → #ffc500

Klicka för att kopiera gradient

Misty Meadow

#215f00 → #e4e4d9

Klicka för att kopiera gradient

Aqualicious

#50C9C3 → #96DEDA

Klicka för att kopiera gradient

Moor

#616161 → #9bc5c3

Klicka för att kopiera gradient

Almost

#ddd6f3 → #faaca8

Klicka för att kopiera gradient

Forever Lost

#5D4157 → #A8CABA

Klicka för att kopiera gradient

Winter

#E6DADA → #274046

Klicka för att kopiera gradient

Autumn

#DAD299 → #B0DAB9

Klicka för att kopiera gradient

Candy

#D3959B → #BFE6BA

Klicka för att kopiera gradient

Reef

#00d2ff → #3a7bd5

Klicka för att kopiera gradient

The Strain

#870000 → #190A05

Klicka för att kopiera gradient

Dirty Fog

#B993D6 → #8CA6DB

Klicka för att kopiera gradient

Earthly

#649173 → #DBD5A4

Klicka för att kopiera gradient

Virgin

#C9FFBF → #FFAFBD

Klicka för att kopiera gradient

Ash

#606c88 → #3f4c6b

Klicka för att kopiera gradient

Shadow Night

#000000 → #53346D

Klicka för att kopiera gradient

Cherryblossoms

#FBD3E9 → #BB377D

Klicka för att kopiera gradient

Parklife

#ADD100 → #7B920A

Klicka för att kopiera gradient

Dance To Forget

#FF4E50 → #F9D423

Klicka för att kopiera gradient

Starfall

#F0C27B → #4B1248

Klicka för att kopiera gradient

Red Mist

#000000 → #e74c3c

Klicka för att kopiera gradient

Teal Love

#AAFFA9 → #11FFBD

Klicka för att kopiera gradient

Neon Life

#B3FFAB → #12FFF7

Klicka för att kopiera gradient

Man of Steel

#780206 → #061161

Klicka för att kopiera gradient

Amethyst

#9D50BB → #6E48AA

Klicka för att kopiera gradient

Cheer Up Emo Kid

#556270 → #FF6B6B

Klicka för att kopiera gradient

Shore

#70e1f5 → #ffd194

Klicka för att kopiera gradient

Facebook Messenger

#00c6ff → #0072ff

Klicka för att kopiera gradient

SoundCloud

#fe8c00 → #f83600

Klicka för att kopiera gradient

Behongo

#52c234 → #061700

Klicka för att kopiera gradient

ServQuick

#485563 → #29323c

Klicka för att kopiera gradient

Friday

#83a4d4 → #b6fbff

Klicka för att kopiera gradient

Martini

#FDFC47 → #24FE41

Klicka för att kopiera gradient

Metallic Toad

#abbaab → #ffffff

Klicka för att kopiera gradient

Between The Clouds

#73C8A9 → #373B44

Klicka för att kopiera gradient

Crazy Orange I

#D38312 → #A83279

Klicka för att kopiera gradient

Hersheys

#1e130c → #9a8478

Klicka för att kopiera gradient

Talking To Mice Elf

#948E99 → #2E1437

Klicka för att kopiera gradient

Purple Bliss

#360033 → #0b8793

Klicka för att kopiera gradient

Predawn

#FFA17F → #00223E

Klicka för att kopiera gradient

Endless River

#43cea2 → #185a9d

Klicka för att kopiera gradient

Pastel Orange at the Sun

#ffb347 → #ffcc33

Klicka för att kopiera gradient

Twitch

#6441A5 → #2a0845

Klicka för att kopiera gradient

Atlas

#FEAC5E → #C779D0 → #4BC0C8

Klicka för att kopiera gradient

Instagram

#833ab4 → #fd1d1d → #fcb045

Klicka för att kopiera gradient

Flickr

#ff0084 → #33001b

Klicka för att kopiera gradient

Vine

#00bf8f → #001510

Klicka för att kopiera gradient

Turquoise flow

#136a8a → #267871

Klicka för att kopiera gradient

Portrait

#8e9eab → #eef2f3

Klicka för att kopiera gradient

Virgin America

#7b4397 → #dc2430

Klicka för att kopiera gradient

Koko Caramel

#D1913C → #FFD194

Klicka för att kopiera gradient

Fresh Turboscent

#F1F2B5 → #135058

Klicka för att kopiera gradient

Green to dark

#6A9113 → #141517

Klicka för att kopiera gradient

Ukraine

#004FF9 → #FFF94C

Klicka för att kopiera gradient

Curiosity blue

#525252 → #3d72b4

Klicka för att kopiera gradient

Dark Knight

#BA8B02 → #181818

Klicka för att kopiera gradient

Piglet

#ee9ca7 → #ffdde1

Klicka för att kopiera gradient

Lizard

#304352 → #d7d2cc

Klicka för att kopiera gradient

Sage Persuasion

#CCCCB2 → #757519

Klicka för att kopiera gradient

Between Night and Day

#2c3e50 → #3498db

Klicka för att kopiera gradient

Timber

#fc00ff → #00dbde

Klicka för att kopiera gradient

Passion

#e53935 → #e35d5b

Klicka för att kopiera gradient

Clear Sky

#005C97 → #363795

Klicka för att kopiera gradient

Master Card

#f46b45 → #eea849

Klicka för att kopiera gradient

Back To Earth

#00C9FF → #92FE9D

Klicka för att kopiera gradient

Deep Purple

#673AB7 → #512DA8

Klicka för att kopiera gradient

Little Leaf

#76b852 → #8DC26F

Klicka för att kopiera gradient

Netflix

#8E0E00 → #1F1C18

Klicka för att kopiera gradient

Light Orange

#FFB75E → #ED8F03

Klicka för att kopiera gradient

Green Beach

#02AAB0 → #00CDAC

Klicka för att kopiera gradient

Intuitive Purple

#DA22FF → #9733EE

Klicka för att kopiera gradient

Emerald Water

#348F50 → #56B4D3

Klicka för att kopiera gradient

Så Använder du Gradientbiblioteket

  1. 1

    Bläddra i Gradientkollektionen

    Skrolla genom rutnätet av gradientprover för att utforska olika färgkombinationer och stilar. Varje gradient visar sitt namn och färgkoder.

  2. 2

    Visa Enskilda Färger

    Klicka på vänster halva av en gradient för att se startfärgen, eller klicka på höger halva för att se slutfärgen. HEX-koden visas i 2 sekunder.

  3. 3

    Kopiera Gradient-CSS

    Klicka på knappen 'Klicka för att kopiera gradient' under valfri gradient för att kopiera den kompletta CSS background-egenskapen till ditt urklipp.

  4. 4

    Använd i Ditt Projekt

    Klistra in den kopierade CSS-koden i din stilmall eller inline-stilar. Gradienten är redo att användas med linear-gradient-formatet.

Nyckelfunktioner

  • Över 100 Kurerade Gradienter

    Få tillgång till en noggrant utvald samling av över 100 vackra gradientkombinationer, organiserade efter stil och färgtema för enkel navigering.

  • Interaktiv Färgförhandsvisning

    Klicka på vänster eller höger halva av valfritt gradientprov för att se de individuella start- och slutfärgerna med deras HEX-koder visade.

  • Kopiera CSS med Ett Klick

    Kopiera omedelbart färdig CSS linear-gradient-kod till ditt urklipp med ett enda klick på kopieringsknappen.

  • Visuellt Gradientrutnät

    Bläddra bland gradienter i en ren, modern rutnätslayout med gradientnamn och färgkoder tydligt visade för snabb referens.

Vad är Färggradienter?

Färggradienter är mjuka övergångar mellan två eller flera färger som skapar en visuellt tilltalande blandning. I webbdesign låter CSS linjära gradienter dig skapa dessa färgövergångar som flyter i en angiven riktning. Vårt bibliotek innehåller professionellt utvalda gradientkombinationer som fungerar bra tillsammans, vilket sparar dig tid när du ska hitta harmoniska färgövergångar för bakgrunder, knappar, kort och andra designelement.

Varför Använda Vårt Gradientbibliotek?

  • 1

    Professionellt Kurerade

    Varje gradient i vår samling har noggrant valts ut för visuell attraktionskraft och designmångsidighet, vilket säkerställer färgkombinationer av hög kvalitet.

  • 2

    Färdig CSS att Använda

    Få omedelbar CSS-kod som fungerar direkt. Du behöver inte skriva gradient-syntax manuellt eller experimentera med färgvärden.

  • 3

    Interaktiv Färggranskning

    Se enskilda gradientfärger genom att klicka på olika delar av provet, vilket gör det enkelt att förstå exakt vilka färger som används.

  • 4

    Tidsbesparande Designverktyg

    Skippa försöks- och misstagsmetoden med att skapa gradienter från grunden. Hitta den perfekta gradienten snabbt och implementera den omedelbart i dina projekt.

Vanliga frågor

Hur många gradienter finns i biblioteket?

Biblioteket innehåller över 100 noggrant utvalda gradientkombinationer, med olika stilar från subtila övergångar till djärva, levande blandningar som passar olika designbehov.

Hur ser jag de enskilda färgerna i en gradient?

Klicka på vänster halva av ett gradientprov för att se startfärgen, eller klicka på höger halva för att se slutfärgen. HEX-koden visas på provet i 2 sekunder.

Vilket CSS-format kopieras?

Verktyget kopierar en komplett CSS background-egenskap med en linjär gradient som går från vänster till höger (riktning 'to right'). Till exempel: background: linear-gradient(to right, #FF6B6B, #4ECDC4);

Kan jag använda dessa gradienter kommersiellt?

Ja, alla gradienter i biblioteket är gratis att använda i personliga och kommersiella projekt utan begränsningar. Färggradienter kan inte upphovsrättsskyddas.

Hur applicerar jag gradienten på min webbplats?

Efter att ha kopierat CSS-koden, klistra in den i din stilmall eller som en inline-stil. Du kan applicera den på bakgrunden av vilket element som helst, såsom divs, sektioner, knappar eller kort.

Kan jag ändra gradientens riktning?

Ja, efter att ha kopierat CSS-koden kan du ändra riktningen genom att modifiera delen 'to right' till andra värden som 'to bottom', 'to top', '45deg', eller vilken vinkel du föredrar.

Relaterade verktyg

toolAll →

3D 3MF Visare Online

Visa och inspektera 3MF (3D Manufacturing Format) filer direkt i din webbläsare. Interaktiv 3D-visare med rotation, zoom, miljöbelysning och skärmdumpsfunktioner. Inga nedladdningar krävs.

3D DAE Viewer Online

Visa och interagera med 3D DAE (Collada) modeller online gratis. Ladda upp dina DAE-filer, rotera, zooma, panorera och ta skärmdumpar med vår webbläsarbaserade 3D-visare.

3D GLB-visare Online

Visa och inspektera GLB 3D-modeller online gratis. Ladda upp GLB-filer, rotera modeller, ändra miljöer, ta skärmdumpar och utforska 3D-animationer direkt i din webbläsare.

3D OFF-filsvisare

Visa och interagera med 3D OFF (Object File Format)-modeller direkt i din webbläsare. Ladda upp OFF-filer och utforska dem med interaktiva 3D-kontroller, miljöinställningar, automatisk rotation och skärmbildsfunktioner.

Appikonsskapare Online

Skapa professionella appikoner med rundade hörn och anpassade bakgrunder för iOS-, Android- och Desktop-plattformar. Ladda upp din logotyp, justera inställningar och generera alla nödvändiga ikonstorlekar omedelbart.

Arbetsdagar-kalkylator

Beräkna totalt antal arbetsdagar och arbetstimmar för valfritt år med vår omfattande kalkylator för arbetsdagar. Anpassa arbetstimmar (4h, 8h, 12h per dag), inkludera amerikanska federala helgdagar, ställ in anpassade icke-arbetsdagar och se detaljerade uppdelningar per månad och kvartal. Perfekt för projektplanering, lönehantering och resursallokering.

FärgAll →

Bibliotek med populära färgpaletter

Bläddra bland över 200 professionellt utvalda färgpaletter organiserade efter kategori. Kopiera färger direkt, favoritmärk paletter, exportera som CSS, JSON, PNG eller PDF. Perfekt för designers och utvecklare.

Bildfärgsväljare Online

Extrahera färger från vilken bild som helst online gratis. Ladda upp en bild, klicka för att välja färger och få HEX, RGB, HSL och CMYK-värden. Skapa och exportera färgpaletter.

Färgkontrastkontroll

Kontrollera färgkontrastförhållanden för webbtillgänglighet. Testa kombinationer av text- och bakgrundsfärger mot WCAG-riktlinjerna med förhandsgranskning i realtid, tillgänglighetsbetyg och förbättringsförslag.

Färgpalettcollage Skapare

Skapa fantastiska visuella collage genom att kombinera dina bilder med extraherade färgpaletter. Ladda upp vilken bild som helst för att automatiskt extrahera dess dominerande färger och skapa vackra kompositioner med anpassningsbara layouter, stilar och bildförhållanden.

Färgpalettvisare & Generator

Skapa, visa och hantera färgpaletter med avancerade funktioner. Generera paletter med hjälp av färgteori, importera från olika format, kontrollera tillgänglighetskontrast och exportera till CSS, SCSS, Tailwind, JSON eller PNG-format.

Gratis Färgpallattsgenerator Online – Skapa Vackra Färgscheman

Generera fantastiska färgpallatter online med vår gratis färgpallattsgenerator. Skapa harmoniska färgscheman med hjälp av färgteoriprinciper eller extrahera färger från bilder. Exportera till formaten CSS, SCSS, Tailwind, JSON, PDF och PNG.

Alla ÅldrarAll →

3D 3MF Visare Online

Visa och inspektera 3MF (3D Manufacturing Format) filer direkt i din webbläsare. Interaktiv 3D-visare med rotation, zoom, miljöbelysning och skärmdumpsfunktioner. Inga nedladdningar krävs.

3D DAE Viewer Online

Visa och interagera med 3D DAE (Collada) modeller online gratis. Ladda upp dina DAE-filer, rotera, zooma, panorera och ta skärmdumpar med vår webbläsarbaserade 3D-visare.

3D GLB-visare Online

Visa och inspektera GLB 3D-modeller online gratis. Ladda upp GLB-filer, rotera modeller, ändra miljöer, ta skärmdumpar och utforska 3D-animationer direkt i din webbläsare.

3D OFF-filsvisare

Visa och interagera med 3D OFF (Object File Format)-modeller direkt i din webbläsare. Ladda upp OFF-filer och utforska dem med interaktiva 3D-kontroller, miljöinställningar, automatisk rotation och skärmbildsfunktioner.

Appikonsskapare Online

Skapa professionella appikoner med rundade hörn och anpassade bakgrunder för iOS-, Android- och Desktop-plattformar. Ladda upp din logotyp, justera inställningar och generera alla nödvändiga ikonstorlekar omedelbart.

Arbetsdagar-kalkylator

Beräkna totalt antal arbetsdagar och arbetstimmar för valfritt år med vår omfattande kalkylator för arbetsdagar. Anpassa arbetstimmar (4h, 8h, 12h per dag), inkludera amerikanska federala helgdagar, ställ in anpassade icke-arbetsdagar och se detaljerade uppdelningar per månad och kvartal. Perfekt för projektplanering, lönehantering och resursallokering.