CSS cards on üks olulisemaid kasutajaliidese elemente kaasaegses veebidisainis. Hästi kujundatud kaart aitab sisu struktureerida, juhib kasutaja tähelepanu ning muudab veebilehe visuaalselt professionaalsemaks.
2026. aasta veebidisainis kasutatakse üha rohkem hover efekte, gradient ääriseid, glassmorphism stiili, varjuanimatsioone ja minimalistlikke UI komponente, mis muudavad kaardid interaktiivsemaks ja atraktiivsemaks.
Selles artiklis näitame 25 modernset CSS kaarti, mida saab kasutada blogides, e-poodides, portfooliotes, teenuse lehtedel ja paljudes teistes projektides. Kõik näited kasutavad ainult puhast HTML-i ja CSS-i ning ei vaja JavaScripti, mis teeb need kiireks ja lihtsasti kohandatavaks.
Kui otsid inspiratsiooni kaasaegseks card UI disainiks või vajad valmis koodinäiteid, siis allpool leiad praktilised demo lahendused koos HTML ja CSS koodiga.
Artikli sisu
- Mis on CSS card komponent?
- Miks kasutada card-põhist disaini?
- Milliseid CSS tehnikaid kasutatakse?
- 25 modernset CSS kaarti
- Parimad praktikad card disainis
- KKK – CSS cards
Mis on CSS card komponent?
Card ehk kaart on visuaalne kasutajaliidese plokk, mis koondab kokku väikese hulga infot. Tavaliselt sisaldab kaart pealkirja, kirjeldust, pilti, ikooni või tegevusnuppu. Selline struktuur aitab kasutajal sisu kiiresti skaneerida ja vajalikku infot lihtsamini leida.
Card-põhine disain on populaarne, sest see töötab hästi nii desktopis kui ka mobiilis. Kaardid võimaldavad jagada keeruka sisu väiksemateks loetavateks osadeks ning aitavad luua selget ja modernset paigutust.
Neid kasutatakse väga paljudes kohtades: blogi eelvaadetes, toodete listides, hinnapakettides, meeskonnaliikmete profiilides, kliendi tagasisides ja isegi analüütika dashboardides.
Miks kasutada card-põhist disaini?
Kaasaegne veebidisain ei põhine enam ainult pikkadel tekstiplokkidel. Tänapäeva kasutajad soovivad kiiret, visuaalset ja hästi struktureeritud sisu. Card UI aitab selle saavutada.
- parem kasutajakogemus
- selgem visuaalne hierarhia
- lihtsam responsive paigutus
- moodsam ja puhtam disain
- parem loetavus mobiilis
- suurem klikitavus
Õigesti kujundatud CSS kaart võib parandada nii kasutajate käitumist kui ka konversioone, sest visuaalselt tugev komponent tõmbab tähelepanu ning aitab olulise tegevuse kiiremini üles leida.
Milliseid CSS tehnikaid kasutatakse modernsete kaartide loomisel?
2026. aasta veebidisainis kasutatakse kaartide loomisel mitmeid CSS tehnikaid, mis võimaldavad luua väga puhta ja professionaalse tulemuse ilma JavaScriptita.
- CSS transitions
- CSS transforms
- box-shadow ja glow efektid
- gradient taustad ja äärised
- border-radius animatsioonid
- pseudo-elemendid ::before ja ::after
- glassmorphism ja blur efektid
- pildi zoom hover animatsioonid
Kõik selles artiklis olevad kaardid kasutavad neid tehnikaid ning neid saab lihtsalt kohandada vastavalt oma projekti disainile.
25 modernset CSS kaarti – näited
Allpool leiad 25 modernset CSS kaarti koos demo, HTML koodi ja CSS stiiliga. Kõik näited on Gutenbergisse sobivas formaadis ja neid saab kohe kasutada või edasi kohandada.
1. Basic Content Card
Basic content card on üks kõige levinumaid kaarditüüpe veebidisainis. Seda kasutatakse blogipostituste, teenuste või projektide kuvamiseks.
Modern Card Design
Kaasaegne kaardidisain hover animatsiooni, gradient äärise ja modernse kasutajaliidesega.
Vaata rohkem<div class="card-basic">
<div class="card-basic__image">
<img src="image.jpg" alt="">
</div>
<div class="card-basic__content">
<h3>Card Title</h3>
<p>Short description of the card content.</p>
<a class="card-basic__btn" href="#">Read More</a>
</div>
</div>
.card-basic{
width:320px;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}
.card-basic:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.15);
}
.card-basic__image{
height:180px;
overflow:hidden;
}
.card-basic__image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.card-basic__content{
padding:24px;
}
.card-basic__btn{
display:inline-block;
padding:10px 18px;
border-radius:30px;
background:linear-gradient(135deg,#7a5cff,#00c2ff);
color:#fff;
text-decoration:none;
}
2. Hover Lift Card
Hover lift card tõuseb kergelt üles, kui kasutaja viib hiire selle peale. Samal ajal muutub vari tugevamaks. Selline mikro-animatsioon on üks populaarsemaid efekte kaasaegses UI disainis.
Hover Card
See kaart tõuseb hiirega peale liikudes ning lisab kaasaegse hover efekti.
<div class="card-hover"> <h3>Hover Card</h3> <p>This card lifts on hover.</p> </div>
.card-hover{
width:260px;
padding:34px;
background:#fff;
border-radius:14px;
box-shadow:0 10px 24px rgba(0,0,0,.08);
transition:.35s;
}
.card-hover:hover{
transform:translateY(-12px);
box-shadow:0 20px 50px rgba(0,0,0,.18);
}
3. Glassmorphism Card
Glassmorphism kaart kasutab läbipaistvat tausta, blur efekti ja pehmeid valgusreflektsioone, et luua modernne klaasjas kasutajaliides. Selline disain on populaarne kaasaegsetes SaaS rakendustes ja premium veebidisainis.
Glass Card
Modernne klaasja efektiga kaart blur ja valgusreflektsiooniga.
<div class="card-glass"> <h3>Glass Card</h3> <p>Modern glass effect card.</p> </div>
.card-glass{
width:260px;
padding:34px;
background:rgba(255,255,255,.25);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.45);
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
4. Gradient Border Card
Gradient border kaart on trendikas lahendus, mida kasutatakse sageli SaaS ja startup veebilehtedel. Värviline gradient ääris lisab kaardile energiat ja kaasaegset visuaali.
Gradient Border
Puhas ja modernne UI kaart animatsiooniga gradient äärisega.
<div class="card-gradient"> <h3>Gradient Border</h3> <p>Clean modern UI card.</p> </div>
.card-gradient{
width:260px;
padding:34px;
border-radius:16px;
border:3px solid transparent;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(130deg,#ff7a18,#ff3d77,#7a5cff,#00c2ff) border-box;
box-shadow:0 12px 30px rgba(0,0,0,.06);
}
5. Image Overlay Card
Image overlay kaart asetab teksti otse pildi peale. Seda kasutatakse sageli portfooliotes, kinnisvara projektides ja projektide esitlustes, kus pilt mängib olulist rolli visuaalses esitluses.
<div class="card-overlay">
<img src="image.jpg" alt="">
<div class="card-overlay__text">
<h3>Overlay Title</h3>
<p>Project preview</p>
</div>
</div>
.card-overlay{
position:relative;
width:300px;
border-radius:16px;
overflow:hidden;
}
.card-overlay img{
width:100%;
height:200px;
object-fit:cover;
}
.card-overlay__text{
position:absolute;
left:0;
right:0;
bottom:0;
padding:20px;
background:linear-gradient(transparent,rgba(0,0,0,.75));
color:#fff;
}
6. Pricing Card
Pricing kaart sobib ideaalselt teenusepakettide ja hinnaplaanide kuvamiseks. Selge struktuur aitab kasutajatel erinevaid valikuid kiiresti võrrelda ja sobiva plaani valida.
<div class="card-price">
<div class="card-price__badge">POPULAARNE</div>
<h3>Basic</h3>
<p class="card-price__value">19€</p>
<ul>
<li>Funktsioon üks</li>
<li>Funktsioon kaks</li>
<li>E-posti tugi</li>
</ul>
<a href="#" class="card-price__btn">Vali pakett</a>
</div>
.card-price{
width:280px;
padding:36px;
background:#fff;
border-radius:18px;
text-align:center;
position:relative;
border:2px solid transparent;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(140deg,#00c2ff,#7a5cff,#ff3d77) border-box;
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.35s;
overflow:hidden;
}
.card-price:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 25px 65px rgba(0,0,0,.18);
}
.card-price__badge{
position:absolute;
top:16px;
right:16px;
font-size:11px;
font-weight:600;
background:linear-gradient(135deg,#7a5cff,#00c2ff);
color:#fff;
padding:5px 10px;
border-radius:20px;
}
.card-price__value{
font-size:42px;
font-weight:700;
margin:0 0 20px;
color:#2563eb;
}
.card-price__btn{
display:inline-block;
padding:12px 22px;
border-radius:30px;
background:linear-gradient(135deg,#7a5cff,#00c2ff);
color:#fff;
text-decoration:none;
}
7. Feature Card
Feature kaart esitleb ühte konkreetset funktsiooni või teenust koos ikooni, pealkirja ja kirjeldusega. Seda kasutatakse sageli teenuse lehtedel, SaaS rakendustes ja tarkvara funktsioonide tutvustamisel.
Kiire
Välkkiire jõudlus ja optimeeritud töö.
<div class="card-feature"> <div class="card-feature__icon">⚡</div> <h3>Kiire</h3> <p>Välkkiire jõudlus ja optimeeritud töö.</p> </div>
.card-feature{
width:260px;
padding:34px;
text-align:center;
background:#fff;
border-radius:16px;
position:relative;
border:2px solid transparent;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#00c2ff,#7a5cff,#00e0a4) border-box;
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.35s;
overflow:hidden;
}
.card-feature:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 25px 60px rgba(0,0,0,.18);
}
.card-feature__icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
font-size:30px;
border-radius:16px;
background:linear-gradient(135deg,#7a5cff,#00c2ff);
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}
8. Flip Card
Flip card pöördub hoveri ajal ümber ja näitab tagaküljel lisainfot. See on hea lahendus, kui soovid kuvada rohkem sisu väikses ruumis.
<div class="flip-card">
<div class="flip-card__inner">
<div class="flip-card__front">Front</div>
<div class="flip-card__back">Back</div>
</div>
</div>
.flip-card{
width:200px;
height:200px;
perspective:1000px;
}
.flip-card__inner{
position:relative;
width:100%;
height:100%;
transition:transform .6s;
transform-style:preserve-3d;
}
.flip-card:hover .flip-card__inner{
transform:rotateY(180deg);
}
9. Icon Card
Icon card on minimalistlik kaart, kus peamine fookus on ikoonil. Sobib hästi funktsioonide, eeliste või teenuste esiletoomiseks.
<div class="card-icon"> <div class="card-icon__icon">⭐</div> <h3>Premium</h3> <p>Elegant feature block.</p> </div>
.card-icon{
width:220px;
padding:30px;
text-align:center;
background:#fff;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.card-icon__icon{
font-size:40px;
margin-bottom:10px;
}
10. Blog Post Card
Blog post card on üks olulisemaid blogi kujunduse komponente. See aitab esile tuua artikli pealkirja, pildi ja lühikese eelvaate.
Blog Title
Short preview text for the post.
<div class="card-blog">
<img src="image.jpg" alt="">
<div class="card-blog__body">
<h3>Blog Title</h3>
<p>Short preview text for the post.</p>
</div>
</div>
.card-blog{
width:300px;
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.card-blog img{
width:100%;
display:block;
}
.card-blog__body{
padding:18px;
}
11. Product Card
Product card on e-poodides kõige sagedamini kasutatav kaarditüüp. Tavaliselt sisaldab see tootepilti, nime, hinda ja tegevusnuppu.
Product Name
$29
<div class="card-product"> <img src="image.jpg" alt=""> <h3>Product Name</h3> <p class="card-product__price">$29</p> <button>Add to cart</button> </div>
.card-product{
width:260px;
background:#fff;
padding:20px;
border-radius:10px;
text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.card-product img{
width:100%;
border-radius:8px;
}
.card-product__price{
font-size:24px;
font-weight:700;
color:#2563eb;
}
12. Testimonial Card
Testimonial card sobib suurepäraselt kliendi tagasiside kuvamiseks. See lisab sotsiaalset tõestust ja aitab tugevdada usaldust.
“Great service and amazing results.”
John Smith
<div class="card-testimonial"> <p>“Great service and amazing results.”</p> <h4>John Smith</h4> </div>
.card-testimonial{
width:260px;
padding:30px;
background:#fff;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,.12);
font-style:italic;
}
13. Profile Card
Profile card on hea valik meeskonnaliikmete, autorite või ekspertide esitlemiseks. Profiilipilt ja ametinimetus loovad kiire ülevaate.
Jane Doe
Designer
<div class="card-profile"> <img src="avatar.jpg" alt=""> <h3>Jane Doe</h3> <p>Designer</p> </div>
.card-profile{
width:220px;
text-align:center;
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.card-profile img{
border-radius:50%;
}
14. Statistics Card
Statistics card sobib hästi numbrite ja KPI-de kuvamiseks. Lihtne suur number koos lühikese tekstiga töötab dashboardides ja teenuse lehtedel väga hästi.
120+
Projects completed
<div class="card-stats"> <h2>120+</h2> <p>Projects completed</p> </div>
.card-stats{
width:200px;
padding:30px;
text-align:center;
background:#fff;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.card-stats h2{
font-size:36px;
color:#2563eb;
}
15. Badge Card
Badge card lisab kaardi nurka märgise nagu NEW, SALE või POPULAR. See tõmbab tähelepanu ja aitab olulist sisu rõhutada.
New Feature
Highlighted content block.
<div class="card-badge"> <span class="card-badge__label">NEW</span> <h3>New Feature</h3> <p>Highlighted content block.</p> </div>
.card-badge{
position:relative;
width:220px;
padding:30px;
background:#fff;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.card-badge__label{
position:absolute;
top:10px;
right:10px;
background:#ef4444;
color:#fff;
}
16. Horizontal Card
Horizontal card kuvab pildi vasakul ja teksti paremal. See sobib hästi artiklite eelvaadetele, toote highlightidele ja kompaktsetele sisublokkidele.
Horizontal Card
Description text
<div class="card-horizontal">
<img src="image.jpg" alt="">
<div>
<h3>Horizontal Card</h3>
<p>Description text</p>
</div>
</div>
.card-horizontal{
display:flex;
gap:15px;
align-items:center;
width:320px;
padding:15px;
background:#fff;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,.1);
}
17. Image Zoom Card
Image zoom card kasutab hoveril kerget pildi suurendamist. See lisab visuaalset dünaamikat ja aitab kaardil rohkem silma paista.
<div class="card-zoom"> <img src="image.jpg" alt=""> </div>
.card-zoom{
width:300px;
overflow:hidden;
border-radius:12px;
}
.card-zoom img{
width:100%;
transition:transform .3s ease;
}
.card-zoom:hover img{
transform:scale(1.1);
}
18. Border Animation Card
Border animation card muudab hoveri ajal äärise värvi või tunnetust. See on lihtne, aga efektiivne lahendus minimalismi armastavatele disainidele.
Animated Border
Simple UI motion.
<div class="card-border"> <h3>Animated Border</h3> <p>Simple UI motion.</p> </div>
.card-border{
width:240px;
padding:30px;
border:2px solid #2563eb;
border-radius:12px;
background:#fff;
transition:border-color .3s ease, transform .3s ease;
}
.card-border:hover{
border-color:#7c3aed;
}
19. Shadow Depth Card
Shadow depth card kasutab mitmekihilist või tugevnevat varju, et anda kaardile ruumilisust. See on väga levinud premium UI kujundustes.
Depth Card
Hover for more depth.
<div class="card-shadow"> <h3>Depth Card</h3> <p>Hover for more depth.</p> </div>
.card-shadow{
width:240px;
padding:30px;
background:#fff;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,.1);
transition:box-shadow .3s ease, transform .3s ease;
}
.card-shadow:hover{
box-shadow:0 20px 40px rgba(0,0,0,.2);
}
20. Minimal Card
Minimal card keskendub puhtale joonele, heale spacingule ja tagasihoidlikule äärisele. See sobib hästi elegantsetele ja sisukesksetele veebilehtedele.
Minimal UI
Less noise, more clarity.
<div class="card-minimal"> <h3>Minimal UI</h3> <p>Less noise, more clarity.</p> </div>
.card-minimal{
width:220px;
padding:30px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#fff;
}
21. Background Image Card
Background image card kasutab taustapilti kogu kaardi ulatuses. Seda lahendust kasutatakse tihti reiside, kinnisvara ja inspireeriva portfoolio puhul.
Background Card
<div class="card-bg"> <h3>Background Card</h3> </div>
.card-bg{
width:300px;
height:200px;
display:flex;
align-items:end;
padding:20px;
color:#fff;
border-radius:12px;
background:url('image.jpg') center/cover;
}
22. Expand Card
Expand card suureneb hoveri ajal kergelt. See muudab elemendi aktiivsemaks ning aitab tõsta esile olulist sisu.
<div class="card-expand"> <h3>Hover me</h3> <p>Expandable interaction</p> </div>
.card-expand{
width:220px;
padding:30px;
background:#fff;
border-radius:10px;
transition:transform .3s ease;
}
.card-expand:hover{
transform:scale(1.05);
}
23. Stack Card
Stack card loob visuaalse mulje, nagu mitu kaarti oleksid üksteise peal. Selline lahendus sobib hästi loomingulistele ja julgetele veebidisainidele.
<div class="stack-card"> <div class="stack-card__item stack-card__item--one"></div> <div class="stack-card__item stack-card__item--two"></div> </div>
.stack-card{
position:relative;
width:220px;
height:140px;
}
.stack-card__item{
position:absolute;
width:200px;
height:120px;
border-radius:10px;
}
.stack-card__item--one{top:0;left:0;}
.stack-card__item--two{top:10px;left:12px;}
24. Neon Glow Card
Neon glow card sobib tumedale taustale ja futuristlikule disainile. Glow efekt toob esile kaardi servad ning loob pilkupüüdva tulemuse.
Neon Card
Futuristic UI block.
<div class="card-neon"> <h3>Neon Card</h3> <p>Futuristic UI block.</p> </div>
.card-neon{
width:220px;
padding:30px;
background:#111827;
color:#fff;
border-radius:10px;
box-shadow:0 0 15px #22d3ee;
}
25. CTA Card
CTA card on call-to-action plokk, mille eesmärk on suunata kasutaja järgmise tegevuseni. See sobib hästi landing page’dele ja teenuse lehtedele.
Start your project
Build a clean and modern website.
<div class="card-cta"> <h3>Start your project</h3> <p>Build a clean and modern website.</p> <button>Contact Us</button> </div>
.card-cta{
width:260px;
padding:30px;
background:#2563eb;
color:#fff;
text-align:center;
border-radius:12px;
}
.card-cta button{
margin-top:15px;
padding:10px 20px;
border:none;
background:#fff;
color:#2563eb;
}
Soovid selliseid veebiuuendusi ka oma lehele?
Kui tahad, et lisame sinu veebilehele modernsed efektid, animatsioonid ja funktsioonid, siis saame kõik uuendused sinu eest ära teha.
Vaata veebilehe uuendamise teenustParimad praktikad CSS card disainis
Kaardipõhine disain on üks kõige populaarsemaid UI lahendusi kaasaegses veebiarenduses. Hästi kujundatud kaart aitab kasutajal kiiresti aru saada, milline sisu on oluline ning millised elemendid on klikitavad.
Kaardi kujundamisel tuleks jälgida mitmeid olulisi põhimõtteid, mis parandavad nii kasutajakogemust kui ka visuaalset kvaliteeti.
- Selge visuaalne hierarhia – kaardil peaks olema selgelt eristatav pealkiri, sisu ja tegevusnupp.
- Piisav kontrast – tekst ja taust peavad olema hästi loetavad.
- Ühtlane spacing – padding ja margin loovad puhta disaini.
- Hover efekt – väiksed animatsioonid annavad kasutajale visuaalse tagasiside.
- Responsive disain – kaardid peavad toimima hästi mobiilis.
- Optimeeritud pildid – kasutage WebP pilte, et parandada lehe laadimiskiirust.
Lisaks tuleks vältida liiga keerulisi animatsioone. Liigne liikumine võib kasutajat häirida ning muuta veebilehe aeglasemaks. Parimad CSS kaardid on lihtsad, selged ja visuaalselt tasakaalus.
KKK – CSS Cards
Mis on CSS card komponent?
CSS card on kasutajaliidese element, mis kuvab väikese infoüksuse visuaalses plokis. Tavaliselt sisaldab kaart pilti, pealkirja, kirjeldust ja mõnikord ka tegevusnuppu.
Kas CSS kaarte saab teha ilma JavaScriptita?
Jah. Enamik kaasaegseid kaarte saab luua ainult HTML ja CSS abil. Hover animatsioonid, shadow efektid ja isegi flip efektid on võimalikud puhta CSS-iga.
Kas CSS card disain töötab mobiilseadmetes?
Jah, kuid oluline on kasutada responsive kujundust. Kaardid peaksid mobiilis paigutuma ühe veeruna ning nende suurus peab olema piisav, et elemente oleks lihtne puudutada.
Millised CSS card disainid on 2026. aastal populaarsed?
2026. aasta trendide hulka kuuluvad näiteks glassmorphism kaardid, hover lift efektid, gradient äärised, pildi zoom animatsioonid ja minimalistlikud card UI lahendused.
Kus kasutatakse card UI disaini?
Card UI disaini kasutatakse blogides, e-poodides, portfoolio lehtedel, SaaS rakendustes ja dashboardides. Kaardid on eriti kasulikud siis, kui on vaja kuvada palju sisu struktureeritud kujul.
Kokkuvõte
CSS kaardid on oluline osa kaasaegsest veebidisainist. Need aitavad jagada sisu väiksemateks visuaalseteks elementideks, mida kasutajad saavad kiiresti skaneerida ja mõista.
Selles artiklis nägime 25 erinevat CSS kaarti, mida saab kasutada blogides, e-poodides, portfoolio lehtedel ja paljudes teistes projektides.
Kuna kõik näited kasutavad puhast HTML-i ja CSS-i, on neid lihtne kohandada vastavalt oma disainile. Väikeste muudatustega saab muuta värve, animatsioone ja kujundust, et need sobiksid iga veebilehe stiiliga.
Kaardipõhine disain on jätkuvalt üks kõige olulisemaid UI mustreid ning tõenäoliselt jääb see populaarseks ka tulevikus.
