≪!DOCTYPE html≫
            ≪html lang="fa" dir="rtl"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    input{
                        background-color: grey;
                        color: white;
                        border: none;
                        border-radius: 5px;
                        padding: 5px;
                        margin: 5px;
                    }
                    input[type="text"]{
                        background-color: red;
                        width: 200px;
                        transition:background-color 2s;
                        transition-timing-function: linear;
                        transition-delay: 500ms;
                    }
                    input[type="text"]:focus{
                        outline: none;
                        border: solid;
                        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
                        background-color: blueviolet;
                        width: 220px;
                    }
                    label{
                        color: gray;
                        font-size: 10px;
                        padding-right: 20px;
                    }
                    
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪form action=""≫
                    ≪label for=""≫نام≪/label≫
                    ≪input type="text" name="" id=""≫
                ≪/form≫
                ≪a href="https://getcssscan.com/css-box-shadow-examples"≫Box Shadow≪/a≫
            ≪/body≫
            ≪/html≫