BORDER
RADIUS
WIDTH
BORDER SIZES
HOVER STYLES
BORDER COLOR
BORDER EDGES
SHADOW
NORMAL
HOVER
NORMAL
HOVER
HORIZONTAL
VERTICAL
BLUR
SPREAD
SHADOW COLOR
OPACITY
0
1
2
3
4
5
6
7
border-width: 6px 0px 0px 0px;
border-color: rgba(244, 191, 98, 1);
border-radius: 12px;
border-style: solid;
box-shadow: 0px 3px 0px 0px rgba(187, 187, 187, 1);
/* hover styles */
border-style: solid;
box-shadow: 0px 6px 12px 3px rgba(187, 187, 187, 0.2);
Copy Code to Clipboard
How It Was Made
Card Surge was built with a variety of modern tools and technologies including: Gatsby, React, and Netlify, among others.
You're welcome to fork the code on Github and contribute what you'd like to see added:
Why Make This?
Designing cards takes tweaking subtle details, and an easier to use playground makes finding the right styles faster.
Read about the whole process and how it was built in an upcoming blog post:
Contact
If you want to contact me about anything related to the site, you have questions, or want to pull or include your site in the gallery, feel free to reach out on Twitter, Product Hunt, or via email.