CSS Halloween: Eyes See You.
Tags: css, tutorial
Published: 2022-10-19 14:34:55

I made some spooky Halloween eyes using CSS.

I started out similar to other posts with an outer frame around a centered subject. You can see the frame in [B2EMO](https://dev.to/jarvisscript/css-b2emo-from-andor-53mf) and the [Halloween House Party] (https://dev.to/jarvisscript/css-halloween-haunted-house-party-2fo9). In this project I removed the border so you don't see the frame just the subjects which are the eyes. 

```HTML
<div class="flex-container">
<div class="main">
	<div class="outer_frame">
    	  <div class="subject">
    		<div class="eyeball">
          </div>
         </div>
    	  <div class="subject">
    		<div class="eyeball">
          </div>
         </div>
</div>
</div>
```

```CSS

.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: var(--Black);
  justify-content: center;
  align-items: center; 
  position: relative;
}


.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.outer_frame {
  width: 900px;
  height: 600px; 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: row;
  background-color: #18321f;
}


.subject {
	display: flex;
	justify-content: center;
	overflow: visible;
	flex-direction: column;
}
```


## Eyes are spheres
The eyeballs start out as black squares with `border-radius: 50%` which turns the squares to circles. Inside the `eyeballs` are `eyecolor` and inside those are `pupils`. All are squares shaped into circles.


To give them a 3d effect drop-shadows and box shadows are added.

```HTML
		<div class="subject">
			<div class="eyeball">

				<div class="eyecolor">
					<div class="pupil">
				</div>
				</div>
			</div>
		</div>

		<div class="subject">
			<div class="eyeball">

				<div class="eyecolor">
					<div class="pupil">
				</div>
				</div>
			</div>
		</div>
```

```CSS
.eyeball {
  height: 275px;
  width: 275px;
  border-radius: 50%;
  background-color: var(--Black);

  display: flex;
  justify-content: center;
  overflow: hidden;

  filter: drop-shadow(0 0 0.75rem black);
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
}
```


![two eyes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zbsycerl3q5u8hswsh9.jpg)

```CSS
.eyecolor {
  height: 175px;
  width: 175px;
  border-radius: 50%;
  margin-top: 44px; 
  background-color: #103c21;
  justify-content: center;
  overflow: hidden;
  
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
  
  filter: drop-shadow(0 0 1.5rem white);

  background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
  background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);  
  background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
 background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}

```

The `box-shadow: inset -25px -25px 40px rgba(0,0,0,.5)` added to give an edge to the eye color this helps the 3d effect. But adding a `linear-gradient` makes them pop off the screen. It added some highlighting.


![two eyes on a green background.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbipeqzd1daza4mrqc2d.jpg)

## Review

This was fun. I wanted to make something with more depth than previous art projects. I played around with spheres till I figured I could make some spooky eyes.

Have you ever made CSS art? Share links in the comments.

```
-$JarvisScript git push
```

Follow me here and on twitter.
{% twitter 1582742305370689536 %}