How you can style an Anki card with CSS
Date: February 21, 2023
Categories: Idiomas
- Open the Anki on Computer and click on “Browse”.

- In the next window click on “Cards…”

- 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):

- 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