CSS Tricks to Create that Dark Futuristic Web3 Look
Tags: design, web3, frontend, css
Published: 2021-11-14 01:28:49

This dark mode web3 aesthetic looks very cool and futuristic. They all have some common designs that achieve this look. Taking inspiration from [The Graph](https://thegraph.com/), [ARCx Money](http://arcx.money/), [Rabbithole](https://rabbithole.gg/), [Sushi Swap](https://sushi.com/), [Buildspace](https://buildspace.so/) (among others), here are some simple styles you can add to your app:

1. Gradient backgrounds
2. Glowing effect
3. Bright and white text over a dark background
4. Semi transparent backgrounds
5. A quick and easy transition on hover

Let's go through how we can apply these styles to texts, buttons and backgrounds.

In each of these examples, we have a dark background and white text over it. Let's start with some text styles.



## Text styles to create the web3 look

![Web3 text styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgd32jzq3aaciygbnwfw.png)

Refer to this [codepen](https://codepen.io/trishalim/pen/vYJZpxL).
 

### 1. Glow effect
![Example text with Glow effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgrr42bttjrxskzgw6if.png)

```html
<h1 class="text-glow">text glow effect</h1>
```
```css
.text-glow {
  text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
}
```

You can use this effect for headings, or to emphasize a certain word in a heading, or as a hover effect for links. [The Graph](https://thegraph.com/) uses this effect a lot, and I'm here for it!

![Glowing text effect example from The Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnfdngeypg8m7esec017.png)

 
### 2. Gradient background effect
![Text example with gradient background effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dhixl1wd9inxetaei1h.png)

```html
<h1><span class="text-gradient">text gradient effect</span></h1>
```
```css
.text-gradient {
  background: linear-gradient(to right, #30CFD0, #c43ad6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

[Buildspace](https://buildspace.so/) uses this style to emphasize words in a heading. [Rare Blocks](https://rareblocks.xyz/) also uses it to emphasize words in a paragraph. The added bold font weight makes it stand out even more.

![Gradient text effect example from Rare Blocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd8cao6eoie2z0yzc6hk.png)


 
### 3. Combine the gradient and glow effect. Use the gradient to emphasize certain words in a phrase.

![Gradient + Glow effect on buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vegeg9aokaimvcwgohqs.png)

```html
<h1 class="text-glow">
  <span class="text-gradient">text gradient</span> 
  with glow effect
</h1>
```

Now that we have some text effects, let's move on to buttons.
 


## Button styles to create the web3 look

![Button styles to create the web3 look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxztiqdqva4dv7e8xfy4.png) 

All these effects can be found in this [codepen](https://codepen.io/trishalim/pen/WNEOdWK).

First, let's define the colors we'll be using. I'm going for purple. These are `rgb` colors that we will later on use with different opacity levels.

```css
:root {
  /* violet */
  --primary-color: 111, 76, 255;
  
  /* white */
  --text-color: 256, 256, 256;
}
```

Let's also define the base styling of the button. We will add modifier classes later to create different styles.
![Base styling of button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxhchvf2ibnec3jlutdb.png)
 

```html
<button class="btn">Button</button>
```

```css
.btn {
  font-family: sans-serif;
  font-size: 18px;
  padding: 12px 32px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-radius: 50px;
}
```

### 1. Glow on hover
![Example for buttons with Glow on Hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mh0br9jwd4d81rjqkc0.png)
 
```html
<button class="btn btn-glow">Glow on Hover</button>
```

```css
.btn-glow:hover {
  box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
}
```

Make sure to add a transition. A simple 0.3s transition makes a huge difference.

```
.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transition: all 0.3s ease;
}
```

### 2. A bright background with white text.
Let's also use the glow effect on this one.
![Bright background with white text on button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s1i0w45oranhscjaw6z.png)
 

```css
.btn-primary {
  background-color: rgb(var(--primary-color));
  border: 1px solid rgb(var(--primary-color));
  color: rgb(var(--text-color));
}
```

```html
<button class="btn btn-glow btn-primary">Primary Button</button>
```

### 3. A semi transparent background

![Semi transparent background effect on button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp5yc2ggdwudzce0dabr.png) 
 
```css
.btn-semi-transparent {
  background-color: rgba(var(--primary-color), 0.15);
  border: 1px solid rgba(var(--primary-color), 0.25);
  color: rgba(var(--text-color), 0.8);
}
```

Let's make the colors a tiny bit brighter on hover. Again, this is a small change that actually makes a big difference in the experience.

```css
.btn-semi-transparent:hover {
  background-color: rgba(var(--primary-color), 0.35);
  border: 1px solid rgba(var(--primary-color), 0.5);
  color: rgba(var(--text-color), 0.9);
}
```

Let's continue to use the glow effect.

![Glow effect + semi transparent on button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63vc91znzktlov6djisg.png)

```html
<button class="btn btn-semi-transparent btn-glow">Semi Transparent Button</button>
```

See this in action on [The Graph's landing page](https://thegraph.com).

![Semi transparent buttons on The Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/959nqnyxxm3t0f8f7c3k.png)
 

### 4. Gradient background
![Button with gradient background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of3nvbb9ejgyk114rl08.png)
 
```css
.btn-gradient {
  background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167));
  border: 0;
  color: rgba(var(--text-color));
}
```

```html
<button class="btn btn-gradient btn-glow">Gradient Button</button>
```

This is probably the most common button styling that I see on web3 sites such as [Sushi Swap](https://sushi.com/) and [Buildspace](https://buildspace.so/).

![Gradient button example from Buildspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60s7p5zki9m1jkxvxzlr.png)
  

### 5. Gradient border
![Button with gradient border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wo0gygc22rv6wfut85q.png)
 
```css
.btn-gradient-border {
  color: rgb(var(--text-color));
  border: 2px double transparent;
  background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
```

```html
<button class="btn btn-gradient-border btn-glow">
  Gradient Border Button
</button>
```

This is inspired by [ARCx Money](https://arcx.money/passport) and [Sushi Swap](https://sushi.com/).



## Blurred Backgrounds to create the web3 look
[Here's the code for reference.](https://codepen.io/trishalim/pen/jOLwZXO)

For this, we are going to use this galaxy image from Unsplash. Swap this out to experiment. 
![Sample galaxy image from Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bxwssqls1j5cxmyosag.png)

First, let's create a card.

```html
<div class="card">
  <h1>Some text here</h1>
</div>
```

These styles aren't necessary, except for `position: relative`.
```css
.card {
  margin: 1rem;
  padding: 1rem;
  height: 300px;
  width: 300px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
}
```

Let's add the image as a background.

```css
.bg-blur {
  overflow: hidden;
}
.bg-blur::before {
  content: '';
  background-image: var(--bg-image);
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}
```

Now, let's blur the image to create a gradient look using the `filter` property.
```
.bg-blur::before {
  filter: blur(30px);
}
```
![Blurred image effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8948qhp51fcrw73bd8tx.png)
 
In most cases, you don't need an image to achieve a similar effect. You can do it with a gradient background, which Buildspace does really well!
![Gradient background on card from Buildspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pap10ufc8jypj9ar5cmf.png)

But with an image, you can have dynamic colors. Here's an example from [The Graph](https://thegraph.com/explorer). They take the logo, add the blur effect, set that as a background on the card and put the logo on top of it.
![Dynamic blurred background from The Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0f1xsejkaq3gahd4jaw.png)

[Rabbithole](https://rabbithole.gg/) also uses this effect to match their hero background colors with their hero image. See how the background image is just a blurred version of the rabbit image on the right?
![Rabbithole example with blurred background effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0w4hjgfqq2u4q6zgcc1.png)
 
And there you have it! You can start shipping your next web3 project and achieve that web3 aesthetic. Don't forget that you can find all these here:
- [Web3 text styles](https://codepen.io/trishalim/pen/vYJZpxL)
- [Web3 button styles](https://codepen.io/trishalim/details/WNEOdWK)
- [Web3 blurred background style](https://codepen.io/trishalim/pen/jOLwZXO)

I hope you enjoyed and learned something from this article! If you'd like to see more of this, let me know in the comments. [You can also learn more about me here](https://trishalim.com) or [download my website template](https://trishalim.gumroad.com/l/portfolio-website-template-for-software-developers).

PS: I currently have availability for a frontend role and I'm saving that for a web3 project. 😉

Meanwhile, I'll leave you with this beauty that is [ARCx's passport designs](https://arcx.money/skins). 😍
![ARCx passport design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z1bhsmpvzeuew9mpd1u.png)