Creëer een ombre achtergrond met CSS

ombre-achtergrond

Een ombre achtergrond voor je website creëert een subtiele touch in jouw blogdesign. Het is net een tikkeltje anders dan een éénkleurige achtergrond en je kan er eindeloos mee experimenteren. Moest je voorheen nog in Photoshop een achtergrond maken, nu kan dat al met enkele regels CSS styling. Super makkelijk toe te passen en het geeft een heel leuk effect aan jouw blog. Kijk maar mee!

Creëer een ombre achtergrond met CSS

  1. Ga naar Ultimate CSS Gradient Generator
  2. Maak een ombre achtergrond door een preset te selecteren of ga zelf aan de slag met het kiezen van de kleuren. Klik op de kleine gekleurde vierkantjes om de kleur te veranderen. Versleep ze om de kleuren anders in elkaar over te laten lopen.
  3. Twee vakjes naast elkaar zorgen ervoor dat je een harde lijn tussen de kleuren hebt.
  4. Ombre Achtergrond met CSS

  5. Ben je tevreden? Kijk nog even in de preview hoe jouw ombre achtergrond eruit komt te zien.
  6. Ombre Achtergrond met CSS

  7. Kopieer de CSS en plaats deze in jouw stylesheet tussen haakjes bij de BODY tag. Lees in dit artikel hoe je jouw stylesheet moet aanpassen.
  8. Je kan de ombre achtergrond overal toepassen waar jij wilt. Het hoeft niet perse de body tag te zijn, het kan ook bijvoorbeeld bij een widget.
  9. Dat waren alle stappen. Makkelijk nietwaar?

Probeer het uit en experimenteer met verschillende kleuren!

Heb je vragen over het toepassen van een ombre achtergrond? Of wil je het resultaat laten zien? Ik ben er benieuwd naar dus laat het weten in de comments.

Geef een reactie

Één reactie

  1. Wow dit is echt te gek. Ik ga er eens naar kijken of ik iets ombre kan maken. Thnx voor de tip.