DEV Community

Cover image for CSS Tricks to Create that Dark Futuristic Web3 Look

CSS Tricks to Create that Dark Futuristic Web3 Look

Trisha Lim on November 14, 2021

This dark mode web3 aesthetic looks very cool and futuristic. They all have some common designs that achieve this look. Taking inspiration from The...
Collapse
 
azempresas profile image
Azempresas •

muy bueno, pero aqui me muestra un erro en mi VC CODE en la line del webkit

-webkit-background-clip: text;

Also define the standard property 'background-clip' for compatibilitycss(vendorPrefix)

Determines the background painting area.

(Chrome, Safari 3)

Sabes como solucionar?

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan •

I agree, if we ever need to use a prefixed CSS property, we must always specify the un-prefixed version as well, even if it's not yet supported by any browser. At some point that CSS proprty will move to a standard. Absolutely no point ignoring browsers that follow the standards but don't support some other vendors prefix.

Collapse
 
evankapantais profile image
Evan Kapantais •

Asking in Spanish looking for an answer is kinda counterintuitive XD

Just add "background-clip: text;" after your -webkit declaration.

Collapse
 
divyeshkamalanaban profile image
Divyesh Kamalanaban •

Doesn't the glow look too bright? I mean is it optimized for accessibility?

Collapse
 
cheshireswift profile image
☕ツ •

I guarantee accessibility is the last thing on the minds of these absolute wastes of space.

Collapse
 
divyeshkamalanaban profile image
Divyesh Kamalanaban •

I know , right? This looks so generic now, with pretty much all opting for these kinds of memory hoggers. I don't know why there's so hype and excitement for these.

Anyways, thanks for the author to share these details.

Collapse
 
necmettin profile image
Necmettin Begiter •

I didn’t know web3 was about glows, gradients and button styles.

Collapse
 
akinloludavid profile image
akinloludavid •

Thanks for sharing this awesome content.

Collapse
 
trishathecookie profile image
Trisha Lim •

Thanks for reading!

Collapse
 
dilutewater profile image
Rachit Khurana •

It looks stunning

Collapse
 
trishathecookie profile image
Trisha Lim •

Thanks Rachit!

Collapse
 
tim012432 profile image
Timo •

Looks nice

Collapse
 
trishathecookie profile image
Trisha Lim •

Thanks Timo!

Collapse
 
ivanovichenco profile image
Ivan Adolfo Calderon •

Tes, You área Nice.

Collapse
 
tranhiepnguyenhuy1999 profile image
Huy Tran •

I love this article, give me more ideal for my design

Collapse
 
trishathecookie profile image
Trisha Lim •

Glad it helps!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao •

Wow that's awesome i didn't know that it's possible for gradient colors for fonts and even applying some photoshop like capabilities.

Collapse
 
trishathecookie profile image
Trisha Lim •

It's pretty cool!

Collapse
 
miyuki profile image
Miyuki☆Starmiya •

Wow! is this web3 styling? it's quite cute!

Collapse
 
sehgalspandan profile image
Spandan Sehgal •

Thanks for writing I found it amazing it helps out me a lot I am so happy after getting this trick that I have no words to say.
Please keep writing more content like this .

Collapse
 
zyabxwcd profile image
Akash •

so cool