Gratis CSS-kodgenerator för Instagram-Style-filter

Hur cool skulle det vara att lägga till bildfilter på din webbplats? För flera år sedan skulle det kräva JavaScript men idag kan du bygga anpassade bildfilter med bra gammal HTML och CSS.

Och med cssFilters webapp behöver du inte ens skriva någon av CSS-koden!

Detta gratis verktyg hjälper dig att bygga anpassade bildfilter med CSS3-filter. Du kan hitta många guider som täcker CSS filteregenskapen i detalj. Men med cssFilters behöver du inte oroa dig för hur allting fungerar, du anpassar bara dina inställningar och kopierar koden.

Överst på skärmen märker du en lång stapel full av anpassade Instagram-filter. Dessa filter inkluderar alla populära val som Hudson, Brödrost, Inkwell, Lofi och många andra.

Du klickar helt enkelt på vilket filter du vill ha och klickar sedan på “CSS-kod” fliken i det övre högra hörnet. Därifrån får du både HTML och CSS-koden. Bara kopiera / klistra in på din webbplats och du är bra att gå.

Men du kan också anpassa dessa filter med inställningsreglagen. Under “generator” flik kan du ändra inställningar som mättnad och kontrast tillsammans med oskärpa, gråskala, sepia och till och med överlagringsstilen som en linjär gradient eller radiell gradient.

Varje gång du flyttar en reglage uppdateras koden automatiskt så att du inte behöver spara något.

Och du kan även byta standardbilden genom att ladda upp en från din dator eller välja en från Unsplash.

Den här webappen gjordes av Indrashish Ghosh och den kör många av de standardklasser som finns i CSSgram-biblioteket.

Men de anpassade inställningarna går långt bortom de grundläggande förinställningarna, och fri kodgenerering gör det här till ett användbart verktyg för kodare och icke-kodare. Vi har redan många CSS3-generatorer för egenskaper som bakgrundsgradienter och textskuggor. Och nu har vi cssFilters som premiär CSS3 bildfiltergenerator.