3D Text Effect Using Pure CSS

A nice 3D text effect on the gray color background. These 3d effects are much easier to use. Useful for any website. Fully Responsive design for all types of devices.

Ryan is the author of this beautiful design. The previous tutorial is how it creates Pricing Table Responsive Design.

HTML

<h1 class="text">CSSPOINTS</h1>

CSS

body {
    background-color: #c4c4c4;  
}
.text {
    position: absolute;
    top: 40%; 
    right: 50%;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 8em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}

3 Comments

  1. Hi Ryan. I am a semi-newbie to html/css and I have to say…WOW you’re 3d text is absolutely beautiful! Thankyou for this, you just opened my eyes on how remarkable CSS is. Great job.

  2. […] Only CSS and HTML are used to create this beautiful social card effect. This effect is made by Adam Dipinto. The previous tutorial is how to do 3D Text Effect Using Pure CSS. […]

  3. Superb site you have here but I was wondering if you
    knew of any user discussion forums that cover the same topics talked about in this article?
    I’d really love to be a part of community where I can get suggestions from other experienced people that share the same interest.
    If you have any recommendations, please let
    me know. Cheers! – Calator prin Romania.

Leave a Reply