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
 
miyuki profile image
Miyuki☆Starmiya

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

Collapse
 
necmettin profile image
Necmettin Begiter

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

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
 
ivanovichenco profile image
Ivan Adolfo Calderon

Tes, You área Nice.

Collapse
 
tim012432 profile image
Timo

Looks nice

Collapse
 
trishathecookie profile image
Trisha Lim

Thanks Timo!

Collapse
 
dilutewater profile image
Rachit Khurana

It looks stunning

Collapse
 
trishathecookie profile image
Trisha Lim

Thanks Rachit!

Collapse
 
akinloludavid profile image
akinloludavid

Thanks for sharing this awesome content.

Collapse
 
trishathecookie profile image
Trisha Lim

Thanks for reading!

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
 
zyabxwcd profile image
Akash

so cool

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 .