Designverktyg
14 verktygVälj färger, skapa CSS-effekter, kontrollera kontrast och skapa visuella tillgångar.
- CSS-gradientgeneratorSkapa vackra CSS-gradienter med förhandsgranskning
- SkugggeneratorGenerera CSS-egenskaper för box-shadow
- HörnradiegeneratorSkapa CSS-egenskaper för border-radius
- SignaturgeneratorSkapa bilder av handskrivna signaturer med 30 typsnitt eller genom att rita
- FörloppsindikatorgeneratorUtforma animerade förloppsindikatorer
- VattenstämpelverktygLägg till vattenstämplar med text eller logotyper på bilder som skydd
- WCAG-kontrastkontrollKontrollera färgkontrastförhållanden för att uppfylla tillgänglighetskraven i WCAG AA och AAA
- Favicon-generatorSkapa favikoner från text, emoji eller bilder för din webbplats
- FotokollageverktygSkapa vackra fotokollage med flera layouter
- Färgväljare och palettgeneratorVälj färger och generera färgpaletter
- RGB till HEX till HSLKonvertera mellan färgformaten RGB, HEX och HSL
- CSS-animationsgeneratorSkapa CSS-nyckelbildsanimationer med en visuell tidslinjeredigerare
- CSS Flexbox-testmiljöInteraktiv testmiljö för att lära dig och generera Flexbox-layouter
- CSS Grid-generatorVisuell CSS Grid-layoutbyggare med kodgenerering
Skapa och kontrollera visuella detaljer
Skapa färger, CSS-effekter, layoutsnuttar och små visuella tillgångar till ett projekt. Med en förhandsgranskning blir det lättare att välja effekt, men slutresultatet beror på den omgivande designen, visningsytan och innehållet. Kontrollera kontrast och responsivt beteende, inte bara hur ett enskilt element ser ut.
Från visuellt val till användbart resultat
CSS-gradientgenerator skapar gradientstilar, Färgväljare och palettgenerator hjälper dig att välja en palett och WCAG-kontrastkontroll jämför förgrunds- och bakgrundsfärger. Testa resultatet med dina faktiska textstorlekar och lägen.
Vanliga frågor
Blir en sida helt tillgänglig om kontrastförhållandet godkänns?
Nej. Kontrast är bara en kontroll. Tangentbordsnavigering, etiketter, synlig fokusmarkering, dokumentstruktur och andra tillgänglighetskrav spelar också roll.
Hur gör jag om en gradientförhandsvisning till en stil för webbplatsen?
CSS-gradientgenerator skapar en gradientdeklaration. Använd den på rätt element och testa den med de faktiska måtten, texten och bakgrunden på sidan.
Kan jag jämföra två färger innan jag väljer dem till text?
WCAG-kontrastkontroll beräknar ett kontrastförhållande för förgrunds- och bakgrundsfärger. Använd de faktiska färgerna och kontrollera de kriterier som gäller för textens storlek och vikt.
Hur växlar jag mellan HEX, RGB och HSL?
RGB till HEX till HSL ändrar skrivsättet för ett färgvärde. Skrivsättet beskriver färgen, men det skapar inte automatiskt en palett och garanterar inte god kontrast.