Charts.css

# 3D Effects

A 3D effect can be applied on the charts to give it depth. There are several techniques to achieve this.

# 3D Bars

To make the bars look like 3D bars is pretty simple. It can be done using CSS box-shadow property:

#custom-effect tbody td {
  margin-inline-start: 10px;
  margin-inline-end: 20px;
  box-shadow:
    1px -1px 1px lightgrey,
    2px -2px 1px lightgrey,
    3px -3px 1px lightgrey,
    4px -4px 1px lightgrey,
    5px -5px 1px lightgrey,
    6px -6px 1px lightgrey,
    7px -7px 1px lightgrey,
    8px -8px 1px lightgrey,
    9px -9px 1px lightgrey,
    10px -10px 1px lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3D Effect Example #1
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

Or using :before and :after psedo-elements with skew property.

#custom-effect tbody td {
  margin-inline-start: 10px;
  margin-inline-end: 20px;
}
#custom-effect tbody td:before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 100%;
  height: 10px;
  transform: skewX(-45deg);
  transform-origin: top;
  background-color: lightgrey;
}
#custom-effect tbody td:after {
  content: '';
  position: absolute;
  top: -4px;
  right: -10px;
  width: 10px;
  height: 100%;
  transform: skewY(-45deg);
  transform-origin: top;
  background-color: lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
3D Effect Example #2
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# 3D Cylinders

To make the bars look like 3D cylinders you can use the border-radius property:

#custom-effect tbody td {
  margin-inline-start: 20%;
  margin-inline-end: 20%;
  border-radius: 50% / 12px;
  background:
    radial-gradient(ellipse 60% 15px at bottom, grey 50px, transparent 50px) bottom,
    radial-gradient(ellipse 60% 15px at top, lightgrey 50px, transparent 50px) top,
    linear-gradient(grey, darkgrey, lightgrey);
}
1
2
3
4
5
6
7
8
9
3D Effect Example #3
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Tilt Chart

Another way to make your chart look 3D is to tilt the entire <table> with css skew().

#custom-effect {
  margin: 1.5rem auto;
  transform: skewY(20deg);
}
#custom-effect tbody td {
  margin-inline-start: 10px;
  margin-inline-end: 20px;
  box-shadow:
    1px -1px 1px lightgrey,
    2px -2px 1px lightgrey,
    3px -3px 1px lightgrey,
    4px -4px 1px lightgrey,
    5px -5px 1px lightgrey,
    6px -6px 1px lightgrey,
    7px -7px 1px lightgrey,
    8px -8px 1px lightgrey,
    9px -9px 1px lightgrey,
    10px -10px 1px lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3D Effect Example #4
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

Or tilting the other way the cylinder bars with a nice linear gradient and some shades:

#custom-effect {
  margin: 1.5rem auto;
  transform: skewY(-8deg);
}
#custom-effect tbody td {
  margin-inline-start: 20%;
  margin-inline-start: 20%;
  margin-inline-end: 20%;
  border-radius: 50% / 12px;
  background:
    radial-gradient(ellipse 60% 15px at bottom, grey 50px, transparent 50px) bottom,
    radial-gradient(ellipse 60% 15px at top, lightgrey 50px, transparent 50px) top,
    linear-gradient(grey, darkgrey, lightgrey);
  box-shadow: 2px  2px 5px grey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3D Effect Example #5
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Chart Reflection

We can also use the webkit reflect effect to highlight the chart

#custom-effect {
  height: 200px;
  margin: 0 auto 100px;
  -webkit-box-reflect:
    below
    3px
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      from( transparent ),
      color-stop( 10%, transparent ),
      to( rgba( 255, 255, 255, 0.25 ) )
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
3D Effect Example #6
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Charts with Shadows

Using shadow is always a good practice to create 3D effects.

#custom-effect tbody {
  padding: 30px;
  border-radius: 10px;
  box-shadow:
    inset -5px -5px 10px rgba(0, 0, 0, 0.5),
    5px 5px 5px rgba(0, 0, 0, 0.5);
}
#custom-effect tbody td {
  margin-inline: 10px;
  border-radius: 10px;
  box-shadow:
    inset -5px -5px 10px rgba(0, 0, 0, 0.5),
    5px 5px 5px rgba(0, 0, 0, 0.5);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3D Effect Example #7
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

← Motion Effects →