🛠 7 CSS-redigerare för WordPress: plugins för visuell redigering och kodredigering 2026

Knappen har fel färg, mellanrummen försköts efter en temauppdatering och logotypen måste flyttas exakt 15 pixlar åt vänster. Låter det bekant? Standard-WordPress-anpassaren ger bara grundläggande inställningar. Allt annat kräver manuell CSS.

Att skriva stilar från grunden, jaga selektorer via inspektorn och undra varför !important inte fungerade är en väg som slukar timmar. En live-CSS-editor med visuellt gränssnitt löser problemet på minuter: klicka på ett element, dra i en slider, klart. Inga redigeringar av temafiler och ingen risk att sajten går sönder.

Vi testade personligen 7 live-CSS-editorer för WordPress, från lätta gratisalternativ till professionella verktyg med inspektorer och visuella kontroller. Var och en passar ett specifikt scenario. Välj utifrån din uppgift.

💡 Snabb översikt:

• Bestäm din nivå: om du skriver CSS för hand eller behöver en visuell editor delar omedelbart in tilläggen i två grupper.
• För manuellt kodarbete, titta på WP Add Custom CSS, Customizer Custom CSS och Simple Custom CSS and JS: alla gratis, lätta, med syntaxmarkering.
• För visuell redigering utan kod, välj mellan CSS Hero, SiteOrigin CSS och Yellow Pencil, var och en med sin egen balans mellan pris och funktioner.
• SiteOrigin CSS är den gyllene medelvägen: visuella kontroller för nybörjare, en fullständig kodredigerare för proffs, gratis, 100 000+ aktiva installationer och en uppdatering från maj 2026.

Jämförelsetabell

1. CSS Hero

CSS Hero är en visuell WordPress-temaredigerare som fungerar enligt principen "klicka och redigera". Du hovrar över ett sidelement, klickar och ändrar färg, typsnitt, mellanrum eller skuggor via kontrollpanelen. Inte en rad kod.

Under huven finns en separat statisk stilmall som inte rör temafilerna. Inaktivera tillägget så återgår sajten till sitt ursprungliga utseende. Inga oåterkalleliga redigeringar och ingen leverantörsinlåsning.

Fördelar:

• Fullutrustad peka-och-klicka visuell editor: redigerar även komplexa CSS-egenskaper som gradienter och box-shadow
• Inbyggd Unsplash-integration: bakgrundsbilder väljs direkt från editorn
• Separat redigering för mobil, surfplatta och dator
• Ändringshistorik med kontrollpunkter, återställning med ett klick

Nackdelar:

• Betald utan gratisversion, endast 30 dagars återbetalningsrätt
• Tungt för engångsredigeringar: om du bara behöver justera en färg är det enklare att öppna anpassaren

Pris: Starter $29/år (1 sajt), Personal $59/år (upp till 5 sajter) på CSS Heros webbplats. Livstidslicens tillgänglig.

🔗 CSS Hero på utvecklarens webbplats

2. WP Add Custom CSS

WP Add Custom CSS är en lättviktslösning för dig som skriver CSS för hand. Tillägget lägger till ett stilinmatningsfält på sajtövergripande nivå och separata fält för specifika inlägg, sidor och anpassade inläggstyper. Inget visuellt gränssnitt, bara en kodredigerare med syntaxmarkering.

I praktiken är detta det snabbaste sättet att implementera anpassade stilar: installera, klistra in kod, spara. Fungerar med Elementor, Gutenberg och den klassiska editorn. Tillägget har 60 000+ aktiva installationer och ett betyg på 4,8 på WordPress.org.

Fördelar:

• Gratis och reklamfri: inga pro-versioner och ingen begränsad funktionalitet
• Tre CSS-utdatalägen: extern fil (för cachning), inline <style> (för renderingshastighet), WordPress-hook (bakåtkompatibilitet)
• Separata CSS-block för varje inlägg och sida, användbart för landningssidor

Nackdelar:

• Endast för dig som kan CSS: ingen visuell editor
• Inte uppdaterad sedan augusti 2025 (v1.2.1), men testad upp till WordPress 6.8.5
• Ingen ändringshistorik: spara och glöm

Pris: Gratis.

🔗 WP Add Custom CSS på WordPress.org

3. SiteOrigin CSS

SiteOrigin CSS är den bästa hybrid-CSS-editorn för WordPress enligt vår erfarenhet. Vi har använt den på flera projekt i över två år. Utvecklad av SiteOrigin, kända för tillägget Page Builder. 100 000+ aktiva installationer, uppdaterad 21 maj 2026, produkten lever och utvecklas.

Tre arbetslägen i ett gränssnitt. Inspektor: hovra över ett element i liveförhandsvisningen och klicka, tillägget markerar boxmodellen (marginal, padding, border) och föreslår CSS-selektorer sorterade efter specificitet. Visuella kontroller: 40+ egenskaper uppdelade i flikar (text, styling, layout). Färger, typsnitt, mellanrum, skuggor justeras med sliders. Kodredigerare: autokomplettering för selektorer och egenskaper, linting, sök och ersätt, blockfolding, nästan en IDE inuti WordPress.

Fördelar:

• Gratis och obegränsad, Premium lägger bara till Google Fonts
• Versioner: 15 senaste sparade versioner med tidsstämplar, återställning med ett klick
• CSS-utdata till en statisk fil, cachas av webbläsare och CDN
• CSS per sida: olika stilar för startsidan, landningssidor och enskilda inlägg

Nackdelar:

• Visuella kontroller täcker inte alla CSS-egenskaper: för komplexa skuggor eller transformeringar behövs kodredigeraren
• Google Fonts-åtkomst kräver Premium (från $29)

Pris: Gratis. SiteOrigin Premium från $29/år (lägger till Google Fonts och prioriterad support).

🔗 SiteOrigin CSS på WordPress.org🔗 SiteOrigins webbplats

4. Customizer Custom CSS

Customizer Custom CSS är ett maximalt enkelt plugin som lägger till ett CSS-inmatningsfält direkt i den vanliga WordPress-anpassaren. Installera, gå till Utseende → Anpassa → Custom CSS, klistra in kod och se resultatet i realtid.

Utvecklaren är den oberoende utvecklaren Bijay Yadav. Pluginet är minimalistiskt: inga visuella redigerare, bara ett textfält med liveförhandsvisning. Stöder media queries för responsiva stilar på mobila enheter. v1.2.3, uppdaterat i mars 2025.

Fördelar:

• Integreras i den vanliga anpassaren: inget behov av att anpassa sig till ett nytt gränssnitt
• Gratis, inga pro-versioner
• Liveförhandsvisning av ändringar
• Stöd för media queries för mobilt

Nackdelar:

• Endast kodredigering, inga visuella verktyg
• Endast 400+ aktiva installationer, sällsynta uppdateringar
• Ingen syntaxmarkering, autokomplettering eller linting, obekvämt för komplext arbete

Pris: Gratis.

🔗 Customizer Custom CSS på WordPress.org

5. Yellow Pencil

Yellow Pencil är en visuell CSS-redigerare med dra-och-släpp för WordPress. Klicka på ett sidelement och få tillgång till 60+ CSS-egenskaper via en visuell panel: färger, typsnitt, avstånd, animationer, gradienter, flexbox-egenskaper. Pluginet genererar ren CSS i bakgrunden utan att röra temafiler.

Gratisversionen på WordPress.org utvecklas aktivt: v7.6.7, uppdaterad maj 2026, 40 000+ aktiva installationer. Pro-versionen såldes tidigare på CodeCanyon men har avvecklats vid tiden för denna recensionsuppdatering. Gratisversionen lever kvar och underhålls, tillräcklig för riktad visuell styling.

Fördelar:

• 60+ CSS-egenskaper i den visuella redigeraren, en av de rikaste uppsättningarna
• Dra-och-släpp-positionering av element
• Designerverktyg: mätlinjal, wireframe-läge, elementsökning
• Kompatibel med alla sidbyggare (Gutenberg, Elementor, etc.)

Nackdelar:

• Viktiga egenskaper är låsta i gratisversionen: teckenfärg, bakgrundsfärg, bredd och höjd
• Pro-versionen är inte längre tillgänglig för köp, uppgraderingsvägen är stängd
• Vissa användare klagar på att gratisfunktionaliteten är otillräcklig för fullständig styling

Pris: Gratis. Pro-version såldes tidigare på CodeCanyon (avvecklad).

🔗 Yellow Pencil på WordPress.org

6. Simple Custom CSS and JS

Simple Custom CSS and JS är en ersättare för det föråldrade Custom CSS and JavaScript, som inte har uppdaterats sedan augusti 2023. Det här pluginet från SilkyPress gör samma sak: lägger till anpassad CSS och JavaScript på sajten via en editor med syntaxmarkering, men är aktivt utvecklat. Pluginet har 600 000+ aktiva installationer på WordPress.org, uppdaterat maj 2026, testat upp till WordPress 7.0.

Kod matas ut antingen inline eller som en extern fil, du väljer själv. Kan placeras i header eller footer, på frontend eller i admin. Antalet snippets är obegränsat. När du byter tema bevaras alla stilar och skript. Pro-versionen lägger till preprocessorer och avancerade villkorsregler.

Fördelar:

• 600 000+ aktiva installationer och uppdatering från maj 2026: produkten lever och är pålitlig
• Kod matas ut till statiska filer, belastar inte databasen
• Separata snippets för frontend och admin
• Koden är temaoberoende: byt tema, stilarna finns kvar

Nackdelar:

• Endast för utvecklare: ingen visuell editor
• Ingen inbyggd ändringshistorik och revisioner
• Pro-versionen är betald, pris ej offentligt angivet

Pris: Gratis. Pro-version med preprocessorer och villkorsregler (pris på förfrågan).

🔗 Simple Custom CSS and JS på WordPress.org

7. Microthemer

Microthemer är vidareutvecklingen av pluginet Themeover. Produkten utvecklades till två verktyg: Microthemer för visuell CSS-redigering och Amender för innehållsredigering. Båda samverkar via ett enhetligt gränssnitt.

Microthemer kombinerar ett visuellt arbetssätt med en fullständig SCSS-editor. Under huven: Sass-stöd, stilexport mellan domäner, optimering av sidladdning och en AI-assistent för CSS. Amender lägger till textredigering, HTML- och JavaScript-moduler (inklusive ESM), något ingen annan i den här samlingen har.

Fördelar:

• Det enda pluginet med SCSS-stöd (Sass) direkt i den visuella editorn
• AI-assistent för att generera CSS-regler
• Designexport mellan domäner, praktiskt när du flyttar ett projekt
• NPM-hanterare för JavaScript-moduler (ESM)

Nackdelar:

• Betald, ingen gratisversion
• Gränssnittet är mer komplext än konkurrenternas: brantare inlärningskurva
• Två produkter istället för en: om du behöver både stil- och innehållsredigering måste du sätta dig in i båda

Pris: Från $19.99/år på Themeovers webbplats. Livstidslicenser finns.

🔗 Microthemer på Themeovers webbplats

⁉️🤔 Vanliga frågor

Behöver jag en visuell editor eller räcker en kod-editor?

Om du skriver CSS dagligen, förstår selektorer och specificitet, ta WP Add Custom CSS. Gratis, snabbt, inga extrafunktioner. Om CSS är en tillfällig uppgift för dig eller du inte alls är utvecklare, välj en visuell editor (SiteOrigin CSS, CSS Hero). Skillnaden ligger i hastighet: att fixa en knappfärg visuellt tar 10 sekunder, via kod tar det en minut att hitta selektorn.

Vad ska jag välja: SiteOrigin CSS eller Yellow Pencil?

SiteOrigin CSS täcker de flesta scenarier för visuell redigering gratis och uppdateras aktivt (maj 2026). Yellow Pencil erbjuder fler egenskaper (60+ mot 40+), men de viktigaste är pro, och Pro-versionen har lagts ned. Om budgeten är begränsad, definitivt SiteOrigin. Om gratissetet med 60+ egenskaper räcker för dig och du inte behöver Google Fonts med animationer, är Yellow Pencil fortfarande relevant.

Kan jag använda flera CSS-plugins samtidigt?

Du kan, men du bör inte. Två plugins som genererar CSS-stilar skapar en kaskadkonflikt: vems stil som åsidosätter den andras är oförutsägbart. Välj ett verktyg och arbeta i det. Undantag: WP Add Custom CSS för globala stilar plus en visuell editor för riktade justeringar, men då måste du strikt separera ansvarsområdena.

Är det säkert att redigera CSS via ett plugin?

Alla plugins i samlingen fungerar utan att modifiera temafiler. CSS-regler sparas i en separat stilmall eller databas. Inaktivera pluginet så återgår sajten till sitt ursprungliga utseende. Den enda nyansen: om du redigerade samma element i två plugins kommer stilarna att "spricka" när du inaktiverar det ena. Håll dig till ett verktyg.

Vilket plugin belastar sajten minst?

WP Add Custom CSS, det lägger bara till en statisk CSS-fil eller ett <style>-block i head. Customizer Custom CSS matar ut stilar via en standard WordPress-hook, också lättviktigt. De visuella editorerna CSS Hero, SiteOrigin CSS och Yellow Pencil lägger till sina skript endast i admin, på frontend genererar de en enda stilmall. Inget av dessa plugins påverkar besökarnas hastighet praktiskt taget alls.

Vad du ska installera för din uppgift

Marknaden för CSS-editorer för WordPress har mognat under fyra år. SiteOrigin CSS har framträtt som en ledare i stabilitet och förhållandet mellan funktioner och pris. Yellow Pencil förlorade sin Pro-version, men gratisversionen fortsätter att uppdateras. Microthemer lade till SCSS och en AI-assistent, och CSS Hero behåller sin status som ett fullfjädrat WYSIWYG-verktyg för dem som inte vill röra kod alls. Simple Custom CSS and JS med 600 000+ installationer täcker behovet av en kod-editor betydligt mer tillförlitligt än sin föregångare.

Om budgeten är begränsad, ta SiteOrigin CSS och lös de flesta stiluppgifter med det. Behöver du maximal visuell kraft och är villig att betala, CSS Hero eller Microthemer. För manuellt kodarbete är WP Add Custom CSS oslagbart i enkelhet, och Simple Custom CSS and JS ger mer flexibilitet med statisk filutmatning. När ett projekt har Sass och behöver modulära stilar är Microthemer med sin SCSS-motor ditt val.

Välj för din uppgift, inte någon annans betyg. Och testa på staging, en regel som räddar nerver.