How you can style an Anki card with CSS

Categories: Idiomas
  • Open the Anki on Computer and click on “Browse”.
  • In the next window click on “Cards…”
Anki styling card button
  • Click on “Styling” (3), and for preview the results of front and back card select “Back Preview” (4).
  • Now select “Styling” and then paste the CSS code with the formatting (5):
Anki styling card css
  • Save it! (6)

Exemple of CSS code to use on card:

html {
   background:
   conic-gradient(at 50% 25%,#0000 75%,#ffbd00 0),conic-gradient(at 50% 25%,#0000 75%,#ffbd00 0) 37px 37px,
   conic-gradient(at 50% 25%,#0000 75%,#ffbd00 0) calc(2*37px) calc(2*37px),
   conic-gradient(at 50% 25%,#0000 75%,#ffbd00 0) calc(3*37px) calc(3*37px),
   repeating-linear-gradient(135deg,#333 0 12.5%,#000000 0 25%);
   background-size: calc(4 * 37px) calc(4*37px);
}

.card {
   font-family: georgia;
   font-size: 28px;
   text-align: center;
   color: white;
   background-color: black;
   border: 8px ridge red;
   padding: 10px;
   z-index: 0;
}

hr {
   border: 4px ridge red;
}

Here a great website to generate your own backgrouds CSS:

https://10015.io/tools/css-background-pattern-generator


    Leave a Reply

    Your email address will not be published.