Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create different device looks (smartphone, tablet and laptop) with CSS?

CSS Web Development Front End Technology

Creating different device looks (smartphone, tablet, and laptop) with CSS allows you to showcase responsive designs or create device mockups. This technique uses CSS styling to mimic the appearance of real devices with borders, rounded corners, and proper proportions.

Syntax

.device {
    position: relative;
    width: device-width;
    height: device-height;
    border: border-width solid color;
    border-radius: corner-radius;
}

Example 1: Smartphone Device

The following example creates a smartphone-like appearance with a home button ?

<!DOCTYPE html>
<html>
<head>
<style>
    .smartphone {
        position: relative;
        width: 300px;
        height: 500px;
        margin: 20px auto;
        border: 16px solid #333;
        border-top-width: 60px;
        border-bottom-width: 60px;
        border-radius: 36px;
        background: white;
    }
    
    .smartphone:after {
        content: '';
        display: block;
        width: 35px;
        height: 35px;
        position: absolute;
        left: 50%;
        bottom: -47px;
        transform: translateX(-50%);
        background: #444;
        border-radius: 50%;
        border: 2px solid #666;
    }
    
    .screen {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }
</style>
</head>
<body>
    <div class="smartphone">
        <div class="screen">Smartphone Screen</div>
    </div>
</body>
</html>

A black smartphone mockup with rounded corners, thick borders for the bezel, and a circular home button at the bottom appears with a gradient screen displaying "Smartphone Screen".

Example 2: Tablet Device

This example creates a tablet appearance with wider dimensions ?

<!DOCTYPE html>
<html>
<head>
<style>
    .tablet {
        position: relative;
        width: 500px;
        height: 350px;
        margin: 20px auto;
        border: 20px solid #2c3e50;
        border-radius: 20px;
        background: white;
    }
    
    .tablet:before {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        position: absolute;
        right: -35px;
        top: 50%;
        transform: translateY(-50%);
        background: #34495e;
        border-radius: 50%;
    }
    
    .tablet-screen {
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #3498db, #9b59b6);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
    }
</style>
</head>
<body>
    <div class="tablet">
        <div class="tablet-screen">Tablet Display</div>
    </div>
</body>
</html>

A dark gray tablet mockup in landscape orientation with rounded corners and a power button on the right side, displaying a blue-purple gradient screen with "Tablet Display" text.

Example 3: Laptop Device

This example creates a laptop appearance with screen and base sections ?

<!DOCTYPE html>
<html>
<head>
<style>
    .laptop {
        margin: 20px auto;
        width: 600px;
    }
    
    .laptop-screen {
        width: 600px;
        height: 400px;
        background: #1a1a1a;
        border: 15px solid #2c2c2c;
        border-bottom: none;
        border-radius: 15px 15px 0 0;
        position: relative;
    }
    
    .laptop-display {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 28px;
    }
    
    .laptop-base {
        width: 650px;
        height: 30px;
        background: linear-gradient(to bottom, #3c3c3c, #2a2a2a);
        border-radius: 0 0 20px 20px;
        margin: 0 auto;
        position: relative;
    }
    
    .laptop-base:after {
        content: '';
        position: absolute;
        width: 300px;
        height: 150px;
        background: #444;
        border-radius: 10px;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        border: 2px solid #555;
    }
</style>
</head>
<body>
    <div class="laptop">
        <div class="laptop-screen">
            <div class="laptop-display">Laptop Screen</div>
        </div>
        <div class="laptop-base"></div>
    </div>
</body>
</html>

A laptop mockup with a dark gray screen section displaying "Laptop Screen" on a gradient background, and a base section with a trackpad area below.

Key Properties for Device Mockups

Property Purpose Usage
border Creates device bezels Different widths for top/bottom vs sides
border-radius Rounded corners Mimics real device curves
position Element positioning For buttons and additional elements
::after/:before Add device details Home buttons, power buttons, trackpads

Conclusion

CSS device mockups use borders, border-radius, and pseudo-elements to create realistic smartphone, tablet, and laptop appearances. These techniques are perfect for showcasing responsive designs or creating interactive demos.

Updated on: 2026-03-15T15:02:09+05:30

935 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements