CodePen Embed - Text - Fade Away

Live

 
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum impedit dignissimos modi est quisquam corporis voluptate magnam deserunt! Numquam laudantium sit magni error. Repellat officia nulla eum modi, in consequuntur deserunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum impedit dignissimos modi est quisquam corporis voluptate magnam deserunt deserunt!.</p>
<p>Lorem ipsum dolor sit amet.</p>

Live

xxxxxxxxxx
 
html, body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
}
p {
    // border: 1px solid #000;
    margin: auto;
    width: 300px;
    padding: 10px;
    line-height: 36px;
    font-size: 20px;
    mask: 
        linear-gradient(270deg, transparent, transparent 30%, #000),
        linear-gradient(270deg, #000, #000);
    mask-size: 100% 46px, 100% calc(100% - 46px);
    mask-position: bottom, top;
    mask-repeat: no-repeat;
}

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":4,\"theme\":\"twilight\",\"id\":\"MWROjvN\",\"auto_save\":true},\"hashid\":\"MWROjvN\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":74111300,\"user_id\":5382232,\"html\":\"<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum impedit dignissimos modi est quisquam corporis voluptate magnam deserunt! Numquam laudantium sit magni error. Repellat officia nulla eum modi, in consequuntur deserunt.</p>\\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum impedit dignissimos modi est quisquam corporis voluptate magnam deserunt deserunt!.</p>\\n<p>Lorem ipsum dolor sit amet.</p>\",\"css\":\"html, body {\\n    width: 100%;\\n    height: 100%;\\n}\\nbody {\\n    display: flex;\\n}\\np {\\n    // border: 1px solid #000;\\n    margin: auto;\\n    width: 300px;\\n    padding: 10px;\\n    line-height: 36px;\\n    font-size: 20px;\\n    mask: \\n        linear-gradient(270deg, transparent, transparent 30%, #000),\\n        linear-gradient(270deg, #000, #000);\\n    mask-size: 100% 46px, 100% calc(100% - 46px);\\n    mask-position: bottom, top;\\n    mask-repeat: no-repeat;\\n}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2024-04-01T01:18:58.262Z\",\"updated_at\":\"2024-04-01T01:18:58.262Z\",\"title\":\"Text - Fade Away\",\"description\":\"\",\"slug_hash\":\"MWROjvN\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":true,\"parent_id\":62014534,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018e973c-f4d7-76ea-aabb-92c20e552964\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}