{"id":2510,"date":"2020-11-28T14:03:00","date_gmt":"2020-11-28T14:03:00","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=2510"},"modified":"2026-05-19T12:56:54","modified_gmt":"2026-05-19T12:56:54","slug":"3-steg-for-att-skapa-moderna-ui-skuggor","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/sv\/3-steg-for-att-skapa-moderna-ui-skuggor\/","title":{"rendered":"Hur du skapar moderna UI skuggor med 3 enkla steg"},"content":{"rendered":"\n

Vill du l\u00e4ra dig hur du skapar fina och moderna UI-skuggor? D\u00e5 \u00e4r det h\u00e4r guiden f\u00f6r dig!<\/em><\/strong><\/p>\n\n\n\n

En tydlig trend i UI-design \u00e4r att skapa v\u00e4ldigt mjuka och naturliga UI-skuggor. Att l\u00e4ra sig skapa s\u00e5dana skuggor \u00e4r viktigt f\u00f6r att kunna skapa mockups som inte ser f\u00f6r\u00e5ldrade ut.<\/p>\n\n\n\n

Steg 1. Skuggans f\u00e4rg<\/h2>\n\n\n\n

Ett av de vanligaste misstaget som g\u00f6rs med skuggor \u00e4r att man anv\u00e4nder #000 (helsvart) f\u00e4rg f\u00f6r skuggor i digital grafik. Det funkar s\u00e4llan. Det \u00e4r l\u00e4tt att tro att skuggor i verkligheten \u00e4r svarta, men det \u00e4r de inte. Det \u00e4r ist\u00e4llet ett sn\u00e4pp m\u00f6rkare \u00e4n omgivningen eller har samma f\u00e4rg som objektet sj\u00e4lv. <\/strong><\/p>\n\n\n\n

Observera till exempel ett objekt i din n\u00e4rhet som har en skugga, t.ex. Vecken p\u00e5 dina kl\u00e4der eller fr\u00e5n en v\u00e4xt. Vilken f\u00e4rg har skuggorna egentligen?<\/p>\n\n\n\n

Skuggans f\u00e4rg ska vara lik antingen<\/strong>:<\/p>\n\n\n\n

    \n
  1. Bakgrundsf\u00e4rgen<\/strong> (background-color i CSS). Till exempel med en bl\u00e5 skugga p\u00e5 en bl\u00e5 bakgrund.<\/li>\n\n\n\n
  2. Objektets f\u00e4rg<\/strong>. Till exempel r\u00f6d skugga bakom ett r\u00f6tt objekt.<\/li>\n<\/ol>\n\n\n\n

    Nedan \u00e4r ett exempel p\u00e5 hur mycket mer naturlig och mjuk en skugga blir om man baserar skuggf\u00e4rgen p\u00e5 kontexten ist\u00e4llet f\u00f6r att endast anv\u00e4nda en svart f\u00e4rg.<\/p>\n\n\n\n

    \"\"
    Exempel p\u00e5 skugga med samma f\u00e4rg j\u00e4mf\u00f6rt med en svart skugga<\/figcaption><\/figure>\n\n\n\n

    Steg 2. Stapla flera skuggor p\u00e5 varandra<\/h2>\n\n\n\n

    En annan enkel riktlinje f\u00f6r att skapa mjuka UI-skuggor \u00e4r att stapla \u00e5tminstone tv\u00e5 olika skuggeffekter (i CSS) p\u00e5 varandra. Det h\u00e4r g\u00f6r att skuggan blir mer naturlig och dynamisk. Vissa staplar uppemot 5\u20137 skuggor p\u00e5 varandra.<\/p>\n\n\n\n

    Dessutom \u00e4r det oftast s\u00e5 i verkligheten att ljus kan reflekteras och studsa p\u00e5 ett objekt och dess omgivning p\u00e5 flera olika s\u00e4tt samtidigt.<\/p>\n\n\n\n

    Nedan \u00e4r exempel p\u00e5 CSS-kod f\u00f6r tv\u00e5 skuggor som man kan stapla p\u00e5 varandra. X st\u00e5r f\u00f6r hur l\u00e5ngt \u00e5t h\u00f6ger (eller v\u00e4nster om man anv\u00e4nder minusv\u00e4rden) skuggan str\u00e4cker sig, Y st\u00e5r f\u00f6r hur l\u00e5ngt ner\u00e5t skuggan str\u00e4cker sig, och blur st\u00e5r f\u00f6r hur diffus\/hur mycket spridning skuggan ska ha.<\/p>\n\n\n\n

      \n
    1. X = 0, Y = 5-10, Blur = 10px<\/li>\n\n\n\n
    2. X = 0, Y = 10(+), Blur = 40-50px<\/li>\n<\/ol>\n\n\n\n
      box-shadow: 0 5px 10px rgba(154,160,185,.025), 0 15px 40px rgba(166,173,201,.2);<\/code><\/pre>\n\n\n\n
      Steg 3. S\u00e4nk opacitet f\u00f6r f\u00e4rgen (genomskinlighet)<\/h2>\n\n\n\n
      Den sista riktlinjen \u00e4r att s\u00e4nka f\u00e4rggenomskinligheten\/opaciteten p\u00e5 skuggorna till \u00e5tminstone 20\u201330%. I vissa fall kr\u00e4vs det att opaciteten \u00e4r \u00e4nnu l\u00e4ngre, t.ex. 10-12%.<\/p>\n\n\n\n
      \"\"
      Exempel p\u00e5 l\u00e5g vs h\u00f6g opacitet p\u00e5 skuggf\u00e4rgen. Alla andra inst\u00e4llningar \u00e4r identiska.<\/figcaption><\/figure>\n\n\n\n
      Fina UI skuggor g\u00f6r stor skillnad<\/h2>\n\n\n\n
      Om man inte har koll p\u00e5 hur man skapar moderna skuggor kan det g\u00f6ra att hela ens designkoncept ser gammalt och icke-professionellt ut. D\u00e4rf\u00f6r \u00e4r det bra att alltid se till att skuggor (och andra detaljer) ser s\u00e5 bra ut som m\u00f6jligt och vara uppdaterad p\u00e5 de designtrender som cirkulerar idag.<\/p>\n\n\n\n
      Tack f\u00f6r att du l\u00e4ste, och jag hoppas att denna guide kunde l\u00e4ra dig n\u00e5got!<\/p>\n\n\n\n
      Andra artiklar om UX\/UI Design<\/h2>\n\n\n\n
      H\u00e4r \u00e4r n\u00e5gra fler artiklar om design ifall du vill l\u00e4sa mer:<\/p>\n\n\n\n